angularjs directive to show list of items - want to animate the removal of an item via a button click on that row

Question

I have a directive that gets a list of items from the server.

(function () { '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() {

        },

    };
   }]);
})();

The "actionItemChecked" method is hooked up onto the html via a button click (ng-click) for each row. I want to be able to provide some animation whilst removing this from the array (and screen). As I understand it I should be using the link for DOM manipulation, but I am not sure how to tell when I should do anything with it.

should I have the "actionItemChecked" method in the link rather than the controller? If so how does it get hooked up to each row?

I have looked at

How to use directive to trigger jquery animation on both add and remove item in a list inside angularjs?

and

angularJS notification when element is removed

but cant see how to do it.

Answer 1

@charlietfl answered my question. I didnt realize that when removing an item from the array in the controller it actually applies ng-leave to the ng-repeat item. I can then use CSS to style the leaving.