如何在角度模型中从carouFredSel中删除项目?

时间:2013-09-18 15:21:24

标签: jquery angularjs dynamic model caroufredsel

我遇到了一些为我的动态旋转木马实现carouFredSel的困境,它使用角度模型进行模型 - 视图 - 控制器关系。 在角度内我应该从我的模型范围中删除项目,但问题是我还应该担心在删除项目时重新计算轮播大小。在carouFredSel中我应该删除触发我点击的元素上的自定义事件'removeItem'的项目但是这个事件更新了DOM树而不是模型 有没有办法正确删除项目?

1 个答案:

答案 0 :(得分:0)

观察您的角度模型并在更改时“重新初始化”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>