javascript - angular ng-click inside ng-repeat 更新 $scope 然后使用 $apply 更新 dom

Question

我正在使用 angular 1.2

ng-repeat 创建的 div 也包含 ng-click

点击时 ng-click 更新 $scope

$scope 中的变化反射(reflect)在使用 $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>

Answer 1

当你使用 ng-click 时，Angular 已经为你调用了 $apply。如果您删除代码中的所有 $scope.$apply()，错误将不会出现，并且会完全一样。 Updated fiddle