定义自定义指令时,链接和编译函数都将“元素”作为自变量,这对于向其添加类非常方便。但是,如果指令是'Element'指令,并且'replace'字段设置为false(为避免使用此折旧字段),则compile和link函数中的element参数是原始指令的element(<some-widget>
),而不是template(<div>
)中的元素,因此浏览器将忽略所有添加的类。
问题:将类动态添加到模板中的HTML标记的最佳实践是什么?(我显然可以将类作为字符串插入,但是感觉很脏)
angular.module('app', [])
.directive('someWidget', function () {
return {
restrict: 'E',
replace: false,
template: '<div>This is the template</div>',
link: function (scope, element) {
element.addClass("orange");
}
};
});
生成的HTML将如下所示:
<some-widget class="orange">
<!-- The orange class is ignored-->
<div>This is the template</div>
<some-widget>
在将replace设置为false时,将类添加到指令中会将它们添加到指令中,这与在div上应用几乎相同
如果您在指令<some-widget class="orange red">
上设置了将被替换为的属性,但属性将像<div class="orange red">This is the template</div>
实际上发生的是,原始DOM节点的所有属性都与模板的根节点中的属性合并
工作示例请参见控制台进行验证
angular.module('app', [])
.directive('someWidget', function () {
return {
restrict: 'E',
replace: true,
template: '<div>This is the template</div>',
link: function (scope, element) {
}
};
});
.orange{color:red;}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<some-widget class="orange red">
</some-widget>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句