Question

定义自定义指令时，链接和编译函数都会获得＆＃39;元素＆＃39;作为一个参数，它可以方便地添加类。但是，如果该指令是一个＆＃39;元素＆＃39;指令，＆'39;替换＆＃39; field设置为false（因为试图避免使用此折旧字段），编译和链接函数中的元素参数是原始指令的元素（<some-widget>），而不是模板中的元素（ <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>

Answer 1

在将replace set设置为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>

在自定义指令模板中向html标记添加类

1 个答案: