在ng-repeat内部进行角度ng-click以更新$ scope,然后使用$ apply更新dom

时间:2014-06-16 21:45:41

标签: javascript angularjs

我使用角度1.2

ng-repeat创建也包含ng-click

的div 单击

ng-click更新$ scope

$ scope的变化反映在使用$ apply

的ng-repeat中

它有效...但是当我点击时我收到错误,我认为我申请$ apply错误

这是我的jsfiddle link

function appcontrol ($scope, $log) {
  // declare $scope vars
  $scope.currentlist = [];
  for (var i = 0; i < 10; i++) {
    $scope.currentlist[i] = {'key':i, 'value':i};  
  }
  $scope.extra = 'My Extra';
  $scope.anotherextra = 'Another Extra';
  // click handler
  $scope.handleCellClick = function(cellnumber){
    $log.log(cellnumber + ' clicked');
    // update the $scope property
    $scope.currentlist[cellnumber].value = 'AAA';
    // push out the new change to the dom
    $scope.$apply();    
    // trigger other stuff
  }
  // click handler
  $scope.handleExtraClick = function(arg){
    $log.log('extra clicked  ', arg);
    // update the $scope property
    if (arg=='My Extra') $scope.extra = 'AAA';
    if (arg=='Another Extra') $scope.anotherextra = 'AAA';
    // push out the new change to the dom
    $scope.$apply();    
    // trigger other stuff
  }         
}

和html

 <div ng-controller="appcontrol">
   <div ng-repeat="item in currentlist" id="cell{{item.value}}" ng-model="item.value" class="cell" ng-click="handleCellClick(item.key)">{{item.value}}</div>
   <div id="cell{{extra}}" ng-click="handleExtraClick(extra)">{{extra}}</div>
   <div id="cell{{anotherextra}}" ng-click="handleExtraClick(anotherextra)">{{anotherextra}}</div>
 </div>

2 个答案:

答案 0 :(得分:4)

当您使用$apply时,Angular已经为您调用了ng-click。如果您取出代码中的所有$scope.$apply(),则错误将不会显示,并且它将完全相同。 Updated fiddle

答案 1 :(得分:2)

您不需要使用$scope.$apply()方式。 AngularJS自动加载$scope中的数据。 $apply()用于从角度框架外部以角度执行表达式。此外,我会非常谨慎地使用此功能,因为它会降低您的性能。

例如,您可以使用$apply()来更改角度以外的数据,如下所示:

//explicitly auto adjust width and height when user changes size
$scope.$apply( function(){              
    $scope.width = $window.innerWidth;
    $scope.height = $window.innerHeight;                            
}); 

在这里结帐更多 - &gt; https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$apply