如何從指令模板控制器功能的訪問

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