jquery - angularモデル内でcarouFredSelからアイテムを削除するにはどうすればよいですか?

Question

モデル-ビュー-コントローラーの関係に角度付きモデルを使用している動的カルーセルに carouFredSel を実装するジレンマに遭遇しました。angular内では、モデルスコープからアイテムを削除する必要がありますが、問題は、アイテムが削除されているときにカルーセルサイズを再計算することについても心配する必要があることです。そして、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>