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()。