Hi I have the next problem:
嗨,我有下一个问题:
In my view I call a function prepareDynamicData(itemMenu);
在我看来,我调用了一个函数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>
I know that top loop repeting only 2 times (verified that), but function prepareDynamicData(itemMenu) calling 4 times, don't know why!? Here is my controller:
我知道顶循环只重复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;
}
}
}
Can you help me clarify why it's happening! thanks
你能帮我澄清一下它为什么会发生!谢谢
1 个解决方案
#1
9
AngularJS uses dirty tracking to make sure the view stays up to date. That means AngularJS will evaluate the values of your view's bindings until they stabilize; thus, it will do this at least twice per binding any time that binding's associated scope updates. (For example, if a specific item internal to the loop changed, it would likely run an additional two times.) This is why care must be taken to ensure that functions bound in the view have no side effects and run quickly.
AngularJS使用脏跟踪来确保视图保持最新。这意味着AngularJS将评估视图绑定的值,直到它们稳定为止;因此,每当绑定的相关范围更新时,它将每个绑定至少执行两次。 (例如,如果循环内部的特定项目发生更改,则可能会再运行两次。)这就是为什么必须注意确保视图中绑定的函数没有副作用并快速运行。
In general, moving data preparation tasks into code that runs when the controller loads, or into a service that is called from the controller, is a good practice--view related code should rarely have side effects! However, if you must/really want to call a function like this from the view, simply keep track of whether or not the function has already been called for the given item.
通常,将数据准备任务移动到控制器加载时运行的代码或者从控制器调用的服务中是一种很好的做法 - 查看相关代码应该很少有副作用!但是,如果您必须/确实想要从视图中调用此类函数,只需跟踪是否已为该给定项调用该函数。
Here is a bit of additional reading on dirty tracking in Angular if you're interested.
如果您有兴趣,可以在Angular中进一步阅读脏跟踪。
#1
9
AngularJS uses dirty tracking to make sure the view stays up to date. That means AngularJS will evaluate the values of your view's bindings until they stabilize; thus, it will do this at least twice per binding any time that binding's associated scope updates. (For example, if a specific item internal to the loop changed, it would likely run an additional two times.) This is why care must be taken to ensure that functions bound in the view have no side effects and run quickly.
AngularJS使用脏跟踪来确保视图保持最新。这意味着AngularJS将评估视图绑定的值,直到它们稳定为止;因此,每当绑定的相关范围更新时,它将每个绑定至少执行两次。 (例如,如果循环内部的特定项目发生更改,则可能会再运行两次。)这就是为什么必须注意确保视图中绑定的函数没有副作用并快速运行。
In general, moving data preparation tasks into code that runs when the controller loads, or into a service that is called from the controller, is a good practice--view related code should rarely have side effects! However, if you must/really want to call a function like this from the view, simply keep track of whether or not the function has already been called for the given item.
通常,将数据准备任务移动到控制器加载时运行的代码或者从控制器调用的服务中是一种很好的做法 - 查看相关代码应该很少有副作用!但是,如果您必须/确实想要从视图中调用此类函数,只需跟踪是否已为该给定项调用该函数。
Here is a bit of additional reading on dirty tracking in Angular if you're interested.
如果您有兴趣,可以在Angular中进一步阅读脏跟踪。