javascript - 到底如何替换:true works with element directives?

Question

我有以下自定义指令:

angular.module('app', [])
    .directive('smartWidget', function () {
        return{
            restrict: 'E',
            replace: true,
            template: '<div>This is the template</div>'
        }
    });

对于 html:

<div id="center">
        <smart-widget class="orange">blah blah</smart-widget>
</div>

使用CSS:

.orange{
    background:orange;
}

我不明白的是，当我设置replace:true时该小部件显示为橙色背景，并带有 replace:false它不是。我预计这会以相反的方式工作，如:

• 与true:<div id="center"><div>This is the template</div><div>

• 并且false:<div id="center"><div class="orange"><div>This is the template</div><div><div> ，但我显然错了!

有人可以解释一下吗？

Answer 1

您确定已检查属性也被替换了吗？

如果您在指令 <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>
<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 问题的更新

w3c 验证允许任何 data-* 属性，因此您可以创建“Attribute”指令并将其与 data-* 一起使用

例如

<div data-some-widget></div>

并将其限制为

 restrict: 'A'