我的配置如下所示:http://plnkr.co/nya3cr
其中我的状态为:
.state('main.layout', {
url : '/l',
abstract : true,
views : {
'left' : {
templateUrl : 'left.html',
controller : 'LeftCtrl'
},
'right' : {
templateUrl : 'right.html',
controller : 'RightCtrl'
},
'middle' : {
templateUrl : 'middle.html',
controller : 'MiddleCtrl'
},
'bottom' : {
templateUrl : 'bottom.html'
}
}
})
我正在尝试在 ui-views 中使用自定义指令，如下所示。
.directive('sidebarDirective', function () {
return {
template: 'Hello hello!',
restrict: 'E',
link: function postLink(scope, element, attrs) {
element.text('this is the sidebarDirective directive');
}
};
});
但我无法在 ui-view 元素中使用它，例如在我的配置中，我尝试将自定义指令(侧边栏指令)保留在 left.html
<div sidebar-directive></div>
以及 right.html 中的内容，但它没有显示。我可能缺少一些关于如何在 ui-view 状态中包含指令的关键理解。请帮忙。
最佳答案
对于限制，您应该使用A而不是E。检查更新的version here
.directive('sidebarDirective', function () {
return {
template: 'Hello hello!',
restrict: 'A', // here should be A, could be even 'AE', but for us A is must!
link: function postLink(scope, element, attrs) {
element.text('this is the sidebarDirective directive');
}
};
});
因为 A 表示属性，E 表示元素，我们将其用作属性:
<div sidebar-directive></div>
更新版本为here
Developer guide - directive (小引用):
The restrict option is typically set to:
- 'A' - only matches attribute name
- 'E' - only matches element name
- 'C' - only matches class name
These restrictions can all be combined as needed:
- 'AEC' - matches either attribute or element or class name
关于angularjs - 如何在 ui View 中显示自定义指令？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27099632/