关于角度 js 指令的使用答案

【问题标题】：Regarding angular js directives usage关于角度 js 指令的使用
【发布时间】：2016-04-05 02:57:59
【问题描述】：

我正在学习角度，所以在阅读文章时，有时会卡住以理解输出。这里我混淆了渲染 html 输出。

代码取自http://www.w3schools.com/angular/tryit.asp?filename=try_ng_directive

<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" w3-test-directive></div>

<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
    return {
        template : "I was made in a directive constructor!"
    };
});
</script>

</body>
</html>

上面的代码运行后输出如下

<div w3-test-directive="" ng-app="myApp" class="ng-scope">I was made in a directive constructor!</div>

我的问题是为什么指令的模板文本会被添加到开始和结束 div 标记中？`

为什么这个属性是空白的w3-test-directive="" in div ?

此文本 I was made in a directive constructor! 可能已添加到 w3-test-directive 的属性中，因此 html 输出可能如下所示

<div w3-test-directive="I was made in a directive constructor!" ng-app="myApp" class="ng-scope"></div>

请帮助我理解为什么指令的模板文本会被添加到开始和结束 div 标记中？` 谢谢

【问题讨论】：

你希望它被添加到哪里？

标签： angularjs

【解决方案1】：

如何使用指令取决于 'restrict' 属性。

如果你添加restrict:'E'，那么你可以将它作为一个元素使用，例如：

<foo></foo>

如果你限制：'A'，现在是：

 <div foo></div>

例子：

angular.module('moduleName')
    .directive('foo', function () {
    return {
        restrict: 'EA', //E = element, A = attribute, C = class, M = comment         
        template: 'Foo'
    }
});

【讨论】：

如果我们使用restrict: 'EA'，你也应该发布html输出。
当directive作为属性使用时，总是像directive-name=""。不添加限制将使其与“EACM”相同。如果你想确认，检查页面，在应用指令的标签上选择 Edit as HTML，你会发现 =""

【解决方案2】：

template 或来自templateURL 的内容始终插入在使用该指令的封闭标记之间。因此，在 div 标签内添加了 template 文本。发生这种情况是因为在它到达 html 之前，它永远不会被显示。

w3-test-directive="" ：这是因为 this 作为属性没有价值。由于在html中不是已知属性，所以没有默认值，所以会这样解析。

我添加了一个示例，其中我使用相同的指令作为元素标记，而不是将其用作属性

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp">
<w3-test-directive></w3-test-directive>
</div>

<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
    return {
        template : "I was made in a directive constructor!"
    };
});
</script>

</body>
</html>

【讨论】：

如果我希望我的输出应该是这样的<div w3-test-directive="I was made in a directive constructor!" ng-app="myApp" class="ng-scope"></div> 那么指令代码中的哪些更改？
你能提供一个用例吗，创建一个合适的例子会很容易
模板的内容将始终显示在包含元素标签中。但是，如果您想传递任何其他数据，您可以使用其他属性。阅读更多tutorialspoint.com/angularjs/angularjs_custom_directives.htm

【解决方案3】：

指令在声明它的元素内呈现它的模板。 w3-test-directive 指令正在您的 div 元素上声明（作为属性）：

<div ng-app="myApp" w3-test-directive></div>

因此它将在该元素的开始和结束标记中呈现您的模板，并且不会（默认情况下）影响 DOM 树中更高的任何内容。

另外，关于无价值的属性——它们不需要值。例如，disabled 或async 属性通常没有值。在许多情况下，仅存在一个特定的属性就足够了。在 Angular 中，声明为属性的指令的存在通常是所需要的。如果您提供值，它们将被解释为对模型数据的引用（由指令定义中的范围声明处理）。

【讨论】：

【解决方案4】：

why this attribute is blank w3-test-directive="" in div ?

blank space is because it show that attributes as Html5 compliance no html5 errors or warnings. same as if we write disable or readonly property.

ng-directives have menu types to declare for example :

<div ng-app="myApp" w3-test-directive></div>

above example of 'A' means Attribute it can be write as follows:

following example with 'E' Element 
<div ng-app="myApp">
 <w3-test-directive></w3-test-directive>
</div>


following example with 'C' Class 

    <div ng-app="myApp">
     <span class='w3-test-directive'></span>
    </div>


for more info please refer following link:

[angular directives][1]


  [1]: https://docs.angularjs.org/guide/directive

【讨论】：