Question

嗨，我有下一个问题：

在我看来，我调用了一个函数prepareDynamicData（itemMenu）;

<div ng-repeat="itemMenu in menuDetailsData.categories" class="headDetails fontH2">
            <div style="display: none">{{prepareDynamicData(itemMenu)}}</div>
            <a href="#" ng-show="dynamicData.expand">{{itemMenu.name}}</a>
            <div ng-repeat="cat in dynamicData.data">
                <p>{{cat.name}}</p>
                <div class="articles">
                    <div ng-repeat="art in cat.items" class="article">
                        <div class="price">
                            <div></div>
                            <span><i>₪</i>{{art.price}}</span>
                        </div>
                        <div class="artDescr">
                            <span class="fontTitle">{{art.title}}</span>
                            <p class="fontDetails">{{art.description}}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

我知道顶循环只重复2次（验证过），但是函数prepareDynamicData（itemMenu）调用了4次，不知道为什么！？这是我的控制器：

function MenuItemCtrl($scope, $routeParams, $http, $location, sharedData) {
if (sharedData.getMenuDetails() == null) {
    $location.path('/menu');
    return;
}
else {
    $scope.menu = sharedData.getMenu();
    $scope.menuDetailsData = sharedData.getMenuDetailsData($routeParams.itemId);
}

$scope.dynamicData = {
    data : new Array(),
    expand : false
};

$scope.prepareDynamicData = function (itemMenu) {
    if (itemMenu.items != null) {
        $scope.dynamicData.data[0] = itemMenu;
        $scope.dynamicData.expand = false;
    }
    else {
        $scope.dynamicData.data = itemMenu.categories;
        $scope.dynamicData.expand = true;
    }
}

}

你能帮我澄清一下它为什么会发生！感谢

Answer 1

AngularJS使用脏跟踪来确保视图保持最新。这意味着AngularJS将评估视图绑定的值，直到它们稳定为止;因此，每当绑定的相关范围更新时，它将每个绑定至少执行两次。（例如，如果循环内部的特定项目发生更改，则可能会再运行两次。）这就是为什么必须注意确保视图中绑定的函数没有副作用并快速运行。

通常，将数据准备任务移动到控制器加载时运行的代码或从控制器调用的服务中是一种好习惯 - 查看相关代码应该很少有副作用！但是，如果您必须/确实想要从视图中调用这样的函数，只需跟踪是否已为该给定项调用该函数。

这里有点additional reading on dirty tracking in Angular if you're interested。

Angular：从视图调用函数

1 个答案: