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.

kicken · Accepted Answer · 2016-07-27 13:14:14Z

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;
});

Community · Accepted Answer · 2017-05-23 12:22:36Z

1

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;
});

edited May 23, 2017 at 12:22

CommunityBot

11 silver badge

answered Jul 27, 2016 at 12:44

zekone

1737 bronze badges

Collectives™ on Stack Overflow

How to get access for function in controller from directive template

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related