The directive of ANGULARJS

The directive of ANGULARJS

Angularjs is not much tongue, here is a brief introduction of the next directive. The content is basically reading notes, so if you've seen "AngularJS up and Running", then this can be ignored.

1, in Angularjs, directives has two main types: 1?? UI display modifiers, such as Ng-show, Ng-model2??　　Reusable components such as menus, carousel, taps, etc. 2, directives definition:

1 angular.module (' Stockmarketapp ', []). directive (' Stockwidget ', [function() {2 return {3  //  Directive definition'll gohere4 }; }]); 　　

It should be noted that the name of the definition takes the hump named, while the application in HTML should be-connected. As the above definition should be: <div stock-widget></div> 3, Templateurl, note that the ANGULARJS will only meet the directive when the first time to fetch, and then cache it up, They are then read from the cache. Defined as follows:

1 angular.module (' Stockmarketapp '). Directive (' Stockwidget ',         [function() {2  return  {3 templateurl: ' stock.html '45 }]); 　　 　　

4, if the HTML is relatively small, you can write the inline HTML directly, placed in the directive definition of the template property. 5. Restrict Properties:

The Restrict keyword defines how someone using the directiveinchTheir code might use it. As mentioned previously, thedefaultThe on using directives is via attributes of existing elements (we used <div stock-widget> forours). When we create our directive, we have controlinchDeciding how it ' s used. The possible values forRestrict (and thus the waysinchwhich we can use our Directive) Are:athe Letter AinchThe value forRestrict specifies that the directive can be used as a attribute on existing HTML elements (such as <div stock-widget& gt;</div>). This is the default value.EThe letter EinchThe value forRestrict specifies that the directive can be used as aNewHTML element (such as <stock-widget></stock-widget>).cthe Letter CinchThe value forRestrict specifies that the directive can be used as a class nameinchExisting HTML elements (such as <div class= "Stock-widget" > </div>).mthe Letter MinchThe value forRestrict specifies that the directive can be used as HTML comments (such as <!--Directive:stock-widget-→). This is previ‐ously necessary forDirectives that needed to encompass multiple elements, like multiple rowsinchTables, etc. The Ng-repeat-start and Ng-repeat-end directives were introduced for  ThisSole purpose, so it's preferable to use them instead of com‐ment directives.

Where a is the default. At the same time, it can be used alone or multiple.　　For example, AE can be used as an attribute or as an element alone. 6, Link function, for directive, the function of the link function with the Controller for view, it defines the API and necessary functions. For each instance of Directive, ANGULARJS executes its link function, so it contains its full business logic and does not affect other instances. Its definition passes several intrinsic parameters, namely the $scope of the directive element, the element itself $element, the attribute $attrs on the element, defined as follows:

1 function ($scope, $element, $attrs) {}

Among them, the complete definition is as follows:

1Angular.module (' Stockmarketapp '). Directive (' Stockwidget ', [function() {2  　　 return {3Templateurl: ' stock.html ',4Restrict: ' AE ',5Linkfunction($scope, $element, $attrs) {6$scope. Getchange =function(stock) {7  　　　　　　 returnMath.ceil ((stock.price-stock.previous)/8stock.previous) * 100);9            };Ten  　　 } }; One}]);

　　7, scope, by default, directive inherits the scope of its parent element and passes it to the link function. This causes some of the following problems: 1?? The new variables and functions will modify the scope of the parent element by default, and the scope of the parent element is more inexplicable than the property and Method 2?? Might inadvertently overwrite the function of the parent element scope or the variable 3?? Directive can implicitly refer to a function or variable of the parent element. So, when defining directive, Angularjs gave us the scope key, which allows us to control the scope, with the following values available:

 by default , each directive inherits its parent's scope, which is passed to it in  the link function  /functions to the scope modifies the parent as well, whic H suddenly gets access to more variables and functions.? the directive might unintentionally override an existing function  or variable 
     
      with 
       The same name. the directive can implicitly start using variables and function s from the parent. This might cause issues  if  we start renaming properties in  The parent and forget to in  The directive. 

Note: False is the default value, which is the scope that is passed down with the parent element. Where object is the most powerful, it does not inherit the scope of the parent element, from the traditional scope of the tree, separated from the directive, need to use the data required by the parent element in the directive reference by the HTML attribute passed in, The values passed can be classified as secret categories, as follows:

false thedefaultValue, which basically tells AngularJS, the directive scope is the same as the parent scope, and whichever one it is. The directive gets access to all the variables and functions that is defined on the parent scope, and any Modifi‐cati ONS it makes is immediately reflectedinchThe parent as well .trueThis tells AngularJS is the directive scope inherits the parent scope, but creates a child scope of its own. The directive thus gets access to all the variables and func‐tions from the parent scope, but any modifications it makes is not availableinchThe parent. This is recommendedifWe need access to the parent's functions and infor‐mation, but need to make local modifications that is specific to The Directive.objectwe can also pass an object withKeys and values to the scope. This tells AngularJS to create a isolated scope. This scope does not inherit anything from the parent, and any data that the parent scope needs to share with  ThisDirective needs to be passedinchThrough HTML attributes. This is the best option when cre‐ating reusable a. Should be independent of what and where they is used.

8, the Replace parameter, all the previous directive when applied to the HTML will be inserted into the child element, but sometimes we need to use it as a separate element, this time can use the Replace parameter. The default setting is False, which is inserted as a child element. When set to true, the directive template replaces the current element, while the attributes on the old element are moved to the new element.

The directive of ANGULARJS