AngularJS jQuery组合 - 范围内的模型未更新

Question

我有简单的模型和jQuery效果附加在ng-repeat内呈现的元素。有人知道为什么模型不会在destroyElement（）函数结束后立即更新吗？

的jsfiddle：http://jsfiddle.net/nEzpS/33/

HTML: 
<div ng-controller="TestController"> 
    <ul> 
     <li ng-repeat="field in Fields" ng-animate-repeat-slide="500"> 
      <span>{{field.name}}</span> <button ng-click="RemoveItem(field)"> Remove</button> 
     </li>  
    </ul>  

    <br /> 

    <code style="color: green;"> 
     Fields.length: {{Fields.length}} 
    </code> 

    <code> 
     {{Fields}} 
    </code> 

    <br /> 
</div> 

JS: 
var myApp = angular.module('myApp', []); 

function TestController($scope) { 
    $scope.Fields = [{name: 'One'}, {name: 'Two'}, {name: 'Three'}, {name: 'Four'}, {name: 'Five'}]; 

    $scope.RemoveItem = function (item) { 
      var index = $scope.Fields.indexOf(item); 

     this.destroyElement(function() { 
      $scope.Fields.splice(index, 1); 
     }); 
    } 
} 

myApp.directive('ngAnimateRepeatSlide', function() { 
     return { 
      restrict: 'A', 
      link: function (scope, element, attrs) { 
       var duration = parseInt(attrs['ngAnimateRepeatSlide']); 
       duration = !isNaN(duration) ? duration : 500; 
       jQuery(element).css('display', 'none').slideDown(duration); 

       scope.destroyElement = function (onCompleteFn) { 

        jQuery(element).animate({ opacity: 0 }, 200); 
        jQuery(element).slideUp(duration, 
         function() { 
          onCompleteFn.call(); 
         } 
        ); 
       } 
      } 
     }; 
}); 

Answer 1

它不能直接在活动范围不再在那里它会被自动地看着正在运行（如你有做回调动画）。

在这种情况下，你需要调用$范围。$适用（）

$scope.RemoveItem = function (item) { 
    var index = $scope.Fields.indexOf(item); 

this.destroyElement(function() {    
     $scope.Fields.splice(index, 1); 
     $scope.$apply(); 
}); 
} 

你可以看到区别，如果你删除slideUp和公正的animate函数调用后直接执行onCompleteFn.call()。