Question

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

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。$ 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，则可以看到差异。

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

1 个答案: