如何从指令模板控制器功能的访问
问题描述:
举例: 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">×</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">×</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.......
,但我需要其他解决方案。
答
将您的通知列表和管理功能移到服务中。将该服务注入您的指令和控制器。
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">×</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">×</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;
});
答
尝试在对象中嵌套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;
});