如何从指令模板控制器功能的访问

Question

举例： HTML：

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

指令通知更换其他指令：

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

例如几个指令：

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

而在控制器我有一个功能vm.deleteNotification（值）

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单击模板没有看到这个机能的研究。此问题可以修复$parent.vm.del.......，但我需要其他解决方案。

Answer 1

将您的通知列表和管理功能移到服务中。将该服务注入您的指令和控制器。

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

Answer 2

尝试在对象中嵌套deleteNotification函数 - 我已经解释了更多here。

也许这样的事情，应该让你访问该功能。

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