如何从指令模板中获取对控制器中函数的访问权限

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（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点击模板看不到这个功能。这个问题可以修复$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函数——我在这里解释了更多。

也许像这样的东西，应该可以让您访问该函数。

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