There is a ready html:

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

It draws the following directives:

 app.directive('notification', function($compile){ return { restrict: 'E', transclude: true, replace: true, scope: { notification: "=notification" }, link: function(scope, element) { var temp = "<notifications" + scope.notification.type.normalCase() + ">"; var link = $compile(temp); var content = link(scope); element.append(content); } } }); 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: 'EC', 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}}] Запрос на участие в курсе: "{{notification.payload.course.name}}" был принят</div>', restrict: 'EC', replace: true, transclude: true } }); app.directive('notificationsStudentRequestRejected', function(){ return { template: '<div class="alert alert-danger alert-dismissible"><button type="button" class="close" ng-click="vm.deleteNotification(notification)"><span aria-hidden="true">&times;</span></button>[{{ notification.createdAt | date}}] Запрос на участие в курсе: "{{notification.payload.course.name}}" был отклонен</div>', restrict: 'EC', replace: true, transclude: true } });

The directives have a button to delete the item. The function is as follows:

 vm.deleteNotification = function(notification){ vm.notifications.splice(vm.notifications.indexOf(notification), 1); } 
 <div ng-repeat="notification in vm.notifications" class="notifications"> Если кнопку создать тут, то она работает отлично и удаляет всё как положенно. Тоисть функция отрабатывает. </div>

But if the button is specified in the directive template, then it is simply not active. Tell me why this is happening?

    1 answer 1

    When using the controllerAs syntax, the link to the controller is stored in the Skop.

    An isolated osprey is not inherited from the current osprey, so it does not have access to the fields of the current osprey and, accordingly, to the vm field.

    There can be many solutions:

    1. use $parent : $parent.vm.delete(...)
    2. pass the function reference to the isolated skop
    3. do not use isolated skop
    4. hang handler with jqLite
    5. event sending
    6. link directly to the parent osprey

    etc.

    • and it is possible an example with $ parent? I can not figure out how to properly use it in this context. - V. Rotenberh
    • @ V.Rotenberh, I already added an example in the answer: $parent.vm.delete(...) instead of simply appealing vm.delete(...) - Grundy