jquery - 如何从角度模型中的 carouFredSel 中删除项目？

Question

我遇到了一些为我的动态轮播实现 carouFredSel 的难题，该动态轮播使用角度模型来实现模型-视图-控制器关系。在角度内，我应该从模型范围中删除项目，但问题是我还应该担心在删除项目时重新计算轮播大小。在 carouFredSel 中，我应该删除在我单击的元素上触发自定义事件“removeItem”的项目，但是此事件更新 DOM 树而不是模型有没有办法正确删除项目？

Answer 1

观察你的角度模型并在变化时“重新初始化”carouFredSel，如下所示：

myModule.directive('myDirective', ['$timeout', function factory($timeout) {
    controller: ['$scope', function($scope) {
        $scope.model = [...];
        $scope.deleteItem = function (item) {
            var index = $scope.model.indexOf(item);
            $scope.model.splice(index,1);
        };
    }],
    link: function postLink(scope, element, attributes) {       
        scope.$watch('model', function() {
            $timeout(function(){
                element.find('.foo').carouFredSel({
                    ...
                });
            }, 500);
        });
    }
}

<div class="foo">
    <div ng-repeat="item in model">
        <div ng-click="removeItem(item)">item</div>
    </div>
</div>