Javascript 为什么'；如果我将名称作为属性而不是标记，那么该指令是否有效？

在中的示例中，可以通过将其名称作为属性放入

中来使用指令。给出的例子是

<div ng-controller="Controller">
  <div my-customer></div>
</div>

然而，在一个类似的例子中，在这里，如果我将

html

代码从

更改为

，代码将不再工作

为什么不呢

JS Fiddle中的代码：

<div ng-app="myapp">
    <div ng-controller="TreeCtrl">
        <tree family="treeFamily">
            <p>{{ family.name }}</p>
        </tree>
    </div>
</div>


var module = angular.module('myapp', []);

module.controller("TreeCtrl", function($scope) {
    $scope.treeFamily = {
        name : "Parent",
        children: [{
            name : "Child1",
            children: [{
                name : "Grandchild1",
                children: []
            },{
                name : "Grandchild2",
                children: []
            },{
                name : "Grandchild3",
                children: []
            }]
        }, {
            name: "Child2",
            children: []
        }]
    };
});

module.directive("tree", function($compile) {
    return {
        restrict: "E",
        transclude: true,
        scope: {family: '='},
            template:       
            '<ul>' + 
                '<li ng-transclude></li>' +
                '<li ng-repeat="child in family.children">' +
                    '<tree family="child">{{family.name}}</tree>' +
                '</li>' +
            '</ul>',
        compile: function(tElement, tAttr, transclude) {
            var contents = tElement.contents().remove();
            var compiledContents;
            return function(scope, iElement, iAttr) {
                if(!compiledContents) {
                    compiledContents = $compile(contents, transclude);
                }
                compiledContents(scope, function(clone, scope) {
                         iElement.append(clone); 
                });
            };
        }
    };
});

tree {
    margin-left: 20px;
    display: block;
}

{{family.name}

var module=angular.module（'myapp'，[]）；
模块控制器（“TreeCtrl”，功能（$scope）{
$scope.treeFamily={
姓名：“家长”，
儿童：[{
姓名：“Child1”，
儿童：[{
名称：“1”，
儿童：[]
},{
姓名:"孙女2",，
儿童：[]
},{
姓名:"孙女3",，
儿童：[]
}]
}, {
姓名：“Child2”，
儿童：[]
}]
};
});
指令（“树”，函数（$compile）{
返回{
限制：“E”，
是的，
作用域：{family:'='}，
模板：
“
”+
“
”+
“
”+
“{{family.name}”+
“
”+
“
”，
编译：函数（远程通讯、tAttr、转置）{
var contents=tElement.contents（）.remove（）；
var编译内容；
返回函数（范围、IELENT、iAttr）{
如果（！compiledContents）{
compiledContents=$compile（内容，转包）；
}
compiledContents（范围，函数（克隆，范围）{
附加（克隆）；
});
};
}
};
});
树{
左边距：20px；
显示：块；
}

这是因为指令中的

限制

选项

这里它被设置为

e

，这意味着只匹配元素名称

---

更多

这是因为指令中的

restrict

选项

这里它被设置为

e

，这意味着只匹配元素名称

---

更多

限制选项用于指定如何在页面上调用指令。有四种不同的方式调用指令，因此有四种有效的限制选项：

'A' - attribute - <span ng-sparkline></span>
'E' - element - <ng-sparkline></ng-sparkline>
'C' - class - <span class="ng-sparkline"></span>
'M' - comment - <!-- directive: ng-sparkline -->

'A'-属性-
“E”-元素-
“C”-类-
“M”-注释-

---

在您的情况下，它不起作用，因为它被定义为restrict“E”元素。

restrict选项用于指定如何在页面上调用指令。有四种不同的方式调用指令，因此有四种有效的限制选项：

'A' - attribute - <span ng-sparkline></span>
'E' - element - <ng-sparkline></ng-sparkline>
'C' - class - <span class="ng-sparkline"></span>
'M' - comment - <!-- directive: ng-sparkline -->

'A'-属性-
“E”-元素-
“C”-类-
“M”-注释-

在您的情况下，它不起作用，因为它被定义为restrict'E'-元素