我有以下Plunker使用ui-router和Angular的1.6x新组件功能。
状态'userRegister'
变为活动状态,然后初始化'userRegister'
组件。该组件向<user-register/>
注入一个新的<ui-view>
,然后注入ng-template
脚本块的HTML内容,这一切都正常。
最终的DOM最终成为:
<ui-view class="ng-scope">
<user-register class="ng-scope ng-isolate-scope">
<h1 class="header">Create account</h1>
</user-register>
</ui-view>
但是,我找不到在<user-register/>
标记中添加CSS类选择器的方法。
e.g。使用名为.example
的类选择器我想实现以下目标:
<user-register class="example ng-scope ng-isolate-scope">...<user-register/>
有什么想法吗?
答案 0 :(得分:1)
当然,你总是可以将模板包装在一个div上并将该类放在那里。
如果不想这样做,您可以注入$element
并使用$postLink
函数添加所需的课程:
.component('userRegister', {
templateUrl: '/views/user-register',
controller: function($element) {
this.$postLink = function() {
$element.addClass('example');
}
}
})
以下是工作人员:
https://plnkr.co/edit/VuWu8L9VqrgJRGnxItY2?p=preview
最终DOM:
<user-register class="ng-scope ng-isolate-scope example">
<h1 class="header">Create account</h1>
</user-register>