Angularjs Learning Department (1) and angularjs Learning Department

Angularjs Learning Department (1) and angularjs Learning Department

Describes how angularjs creates commands replace and transclude Fields

Angularjs commands can be created in four forms, such as the created command hello:

(1) form of page tag E:

<Hello>
<Div> angularjs creation command </div>
<Div> replace usage </div>
</Hello>

(2) label attribute Form A (angularjs default): <div hello> </div>

(3) form of label Style class C: <div class = "hello"> </div>

(4) form of page comment M: <! -- Directive: hello --> (there is a space before and after the comment)

Command creation code:

myApp.directive('hello',function(){return {restrict:'ACEM',template:'<div>hello everyone!</div>',//transclude:falsereplace:false}});

[1] If replace is set to false, the html result displayed on the final page is as follows:

C: <div class = "hello"> <div> hello everyone! </Div> A: <div hello = ""> <div> hello everyone! </Div> E: [2] If replace is set to true, the html result displayed on the final page is as follows:


C: <div class = "hello"> hello everyone! </Div> A: <div hello = ""> hello everyone! </Div> E: <div> hello everyone! </Div> M: <div hello = ""> hello everyone! </Div> (valid)



What are the disadvantages of using replace, for example, I want to display the <div> angularjs creation command </div> <div> replace usage </div> On the page under the "hello" command at the beginning of the article, replace cannot be done, which can be solved by setting the transclude domain:




myApp.directive('hello',function(){return {restrict:'ACEM',template:'<div>hello everyone!<span ng-transclude></span></div>',transclude:true}});
In this way, the DOM tag in the instruction can be displayed:


C: <div class = "hello"> <div> hello everyone! <Span ng-transclude = ""> <span class = "ng-scope"> style class </span> </div>: <div hello = ""> <div> hello everyone! <Span ng-transclude = ""> <span class = "ng-scope"> attributes </span> </div> E: 









Reference: http://stackoverflow.com/questions/15285635/how-to-use-replace-of-directive-definition