0

我在 ng-repeat 内呈现的元素上附加了简单的模型和 jquery 效果。有人知道为什么在 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();
                        }
                    );
                }
            }
        };
});
4

1 回答 1

4

它不再直接在事件范围内运行，它会被自动观看（因为你有执行回调的动画）。

在这种情况下，您需要调用 $scope.$apply()

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

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

如果您删除并在函数调用之后slideUp直接执行，您可以看到差异。onCompleteFn.call()animate

于 2013-01-20T20:37:55.687 回答