0

サーバーからアイテムのリストを取得するディレクティブがあります。

(関数 () { 'use strict';

angular.module('app').directive('myActionItems', ['ActionService', function (ActionService) {

    return {
        restrict: 'E',
        scope: {

        },
        controllerAs: "vm",
        templateUrl: '/app/home/myActionItems.html',

        controller: function ($scope) {
            var vm = this;
            vm.busy = false;

            vm.actions = [];                
            vm.actionItemChecked = actionItemChecked;

            activate();

            function activate() {
                refresh();
            }

            function refresh() {                 
                vm.actions = [];
                vm.busy = true;
                ActionService.getMyActionItems().then(function (result) {
                    vm.actions = result;
                })
                .finally(function () {
                    vm.busy = false;
                });
            }

            function actionItemChecked(action) {
                //submit to server to complete it
                ActionService.markActionItemComplete(action.id)
                    .then(function(result) {
                        //on success remove it from the list.
                        if (result !== undefined && result != null && result.succeeded) {
                            vm.actions = _.without(vm.actions, _.findWhere(vm.actions, { id: action.id }));
                        }
                    });

            }

        },

        link: function() {

        },

    };
   }]);
})();

「actionItemChecked」メソッドは、各行のボタン クリック (ng-click) を介して html に接続されます。これを配列（および画面）から削除しながら、アニメーションを提供できるようにしたいと考えています。私が理解しているように、DOM操作にはリンクを使用する必要がありますが、いつそれを使用する必要があるかを判断する方法がわかりません。

コントローラーではなくリンクに「actionItemChecked」メソッドを含める必要がありますか? もしそうなら、どのように各行に接続されますか?

私は見てきた

angularjs内のリストのアイテムの追加と削除の両方でjqueryアニメーションをトリガーするディレクティブを使用する方法は?

と

要素が削除されたときの angularJS 通知

しかし、それを行う方法がわかりません。

4

1 に答える 1

0

@charlietfl が私の質問に答えました。コントローラーの配列からアイテムを削除すると、実際に ng-leave が ng-repeat アイテムに適用されることに気づきませんでした。次に、CSS を使用して終了のスタイルを設定できます。

于 2014-12-08T15:33:22.490 に答える