2013-04-21 86 views
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>₪</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> 

我知道,上面的循环repeting只有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; 
    } 
} 

}

你能帮我澄清一下,为什么它的发生!感谢

回答

9

AngularJS使用肮脏的跟踪,以确保该视图保持最新。这意味着AngularJS将评估你的视图绑定的值直到它们稳定;因此,每当绑定的关联作用域更新时,它就会每绑定至少执行两次。 (例如,如果内部循环的特定项目发生变化,它可能会运行一个额外的两次。)这就是为什么必须小心,以确保在视图约束功能没有任何副作用,快速运行。

一般情况下,移动数据准备任务为代码在运行控制器负载时,或成是从控制器调用的服务,是一个很好的做法 - 视图相关的代码应该很少有副作用!但是,如果你必须/真的要调用从视图这样的功能,简单地跟踪是否功能已呼吁给定项目。

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