angularjs - Angular : call function from the view

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 次，不知道为什么!？这是我的 Controller :

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

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

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