ディレクティブテンプレートからコントローラ内の機能へのアクセスを取得する方法

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

とコントローラに私がのfuctionを持って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クリックこれのfuctionが表示されないテンプレートに。この問題は$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; 
});