Question

i am learning angular so when reading article then some time getting stuck to understand the output. here i confusion of render html output.

code taken from 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>

when the above code runs then output as follows

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

my question is why the directive's template text gets added within start and end div tag ?`

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

this text I was made in a directive constructor! could have added in the attribute of w3-test-directive so the html output may look like

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

please help me to understand why the directive's template text gets added within start and end div tag ?` thanks

Answer 1

How you use directives depends on the 'restrict' property.

If you add restrict: 'E', then you can use it as a element, ex:

<foo></foo>

If you do restrict: 'A', now its:

 <div foo></div>

More info:

http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-i-the-fundamentals

Example:

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

Answer 2

A directive renders its template within the element upon which it is declared. The w3-test-directive directive is being declared (as an attribute) on your div element:

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

It will therefore render your template within that element's opening and closing tags, and won't (by default) affect anything higher in the DOM tree.

Also, about valueless attributes - they don't need values. For example, the disabled or async attributes do not normally have values. That a particular attribute is merely present is enough, in many cases. In Angular, the presence of a directive, declared as an attribute, is often all that is needed. If you provide values, they will be interpreted as references to model data (handled by the your scope declaration within the directive definition).

Answer 3

The template or the content from templateURL is always inserted between the enclosing tags on which the directive is used. Hence the template text added inside the div tags. This happen because untill it gets to html, it will never be displayed.

w3-test-directive="" : this is because of the fact that this as a attribute has no value. Since it not a known attribute in html, it has no default value, so it will be parsed like this.

I have added an example where i am using the same directive as an element tag instead of using it as a attribute

<!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>

Answer 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

Regarding angular js directives usage

4 个答案: