How to get access for function in controller from directive template - angularjs

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">×</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">×</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.

Answer 1

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">×</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">×</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;
});

Answer 2

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