6

嗨，我有下一个问题：

在我看来，我调用了一个函数 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>₪&lt;/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;
    }
}

}

你能帮我解释一下为什么会这样吗！谢谢

4

1 回答 1

9

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

一般来说，将数据准备任务移动到控制器加载时运行的代码中，或者移动到从控制器调用的服务中，是一个很好的实践——查看相关代码应该很少有副作用！但是，如果您必须/真的想从视图中调用这样的函数，只需跟踪是否已经为给定项目调用了该函数。

如果您有兴趣，这里有一些关于 Angular 中脏跟踪的附加读物。

于 2013-04-21T05:42:25.303 回答