How to get access for function in controller from directive template

Question

Example: HTML:

<div ng-repeat="notification in vm.notifications" class="notifications">
    <notification notification="notification"></notification>
</div>

Directive notification is replaced other directives:

app.directive('notification', function($compile){
        return {
            restrict: 'E',
            transclude: true,
            scope: {
                notification: "=notification"
            },
            link: function(scope, element) {
                var temp = "<notifications" + scope.notification.type.normalCase() + ">";
                element.replaceWith($compile(temp)(scope));
            }
        }
    });

For example a few directives:

app.directive('notificationsStudentRequest', function(){
        return {
            template: '<div class="alert alert-info alert-dismissible"><button type="button" class="close" ng-click="vm.deleteNotification(notification)"><span aria-hidden="true">&times;</span></button>Запрос на участие в курсе: "{{notification.payload.course.name}}"</div>',
            restrict: 'E',
            replace: true,
            transclude: true
        }
    });

    app.directive('notificationsStudentRequestAccepted', function(){
        return {
            template: '<div class="alert alert-success alert-dismissible"><button type="button" class="close" ng-click="vm.deleteNotification(notification)"><span aria-hidden="true">&times;</span></button>[{{ notification.createdAt | date:"medium"}}] Запрос на участие в курсе: "{{notification.payload.course.name}}" был принят</div>',
            restrict: 'E',
            replace: true,
            transclude: true
        }
    });

And in controller I have a fuction vm.deleteNotification(value)

app.controller('NotificationsController', function(){
        var vm = this;
        vm.notifications = {
           //some object with notifications
        }
        vm.deleteNotification = function(notification){
            vm.notifications.splice(vm.notifications.indexOf(notification), 1);
        }

        return vm;
    });

ng-click in template don't see this fuction. This problem can fix $parent.vm.del......., but I need other solutions.

score 1 · Answer 1 · edited May 23 '17 at 12:22

Try nesting the deleteNotification function within an object -- I've explained a bit more here.

Perhaps something like this, should give you access to that function.

app.controller('NotificationsController', function(){
    var vm = this;
    vm.someObject = {};
      //some code
    vm.someObject.deleteNotification = function(notification){
        vm.notifications.splice(vm.notifications.indexOf(notification), 1);
    }

    return vm;
});

score 1 · Accepted Answer · answered Jul 27 '16 at 13:14

Move your notification list and management functions into a service. Inject that service into your directives and controller.

app.service('NotificationManager', function(){
    var self = this;
    angular.extend(self, {
        notifications: {},
        deleteNotification: function(notification){
            self.notifications.splice(self.notifications.indexOf(notification), 1);
        };
    });
});

app.directive('notificationsStudentRequest', function(){
    return {
        template: '<div class="alert alert-info alert-dismissible"><button type="button" class="close" ng-click="dvm.deleteNotification(notification)"><span aria-hidden="true">&times;</span></button>Запрос на участие в курсе: "{{notification.payload.course.name}}"</div>',
        restrict: 'E',
        replace: true,
        transclude: true,
        bindToController: true,
        controllerAs: 'dvm'
        controller: function(NotificationManager){
            this.deleteNotification = function(n){ NotificationManager.deleteNotification(n); }
        }
    }
});

app.directive('notificationsStudentRequestAccepted', function(NotificationManager){
    return {
        template: '<div class="alert alert-success alert-dismissible"><button type="button" class="close" ng-click="dvm.deleteNotification(notification)"><span aria-hidden="true">&times;</span></button>[{{ notification.createdAt | date:"medium"}}] Запрос на участие в курсе: "{{notification.payload.course.name}}" был принят</div>',
        restrict: 'E',
        replace: true,
        transclude: true,
        bindToController: true,
        controllerAs: 'dvm'
        controller: function(NotificationManager){
            this.deleteNotification = function(n){ NotificationManager.deleteNotification(n); }
        }
    }
});

app.controller('NotificationsController', function(NotificationManager){
    var vm = this;
    vm.notifications = NotificationManager.notifications;

    return vm;
});

How to get access for function in controller from directive template

2 Answers2