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-click in template看不到这个功能。此问题可以修复$parent.vm.del.......，但我需要其他解决方案。

Answer 1

尝试在对象中嵌套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;
});

Answer 2

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

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

如何从指令模板访问控制器中的函数

2 个答案: