Follow me to learn angularjs:directive instruction usage interpretation (next)

This text followed me to learn angularjs:directive instruction usage interpretation (the)

8.transclude You can set this value to true if you do not want content inside the directive to be replaced by a template. In general, it needs to be used in conjunction with the Ngtransclude directive. For example: Template: "<div>hello every <div ng-transclude></div></div>", at this time, The content inside the instruction is embedded in the ng-transclude Div. It becomes the <div>hello every <div> this is the content </div></div> within the directive. The default value is false; This configuration option allows us to extract the content contained in the instruction element and place it in a specific location in the instruction template. When you turn on transclude, you can use Ng-transclude to indicate where transcluded content should be placed.

<! DOCTYPE html>
Results:
When Transclude:false, when

If the instruction uses the transclude parameter, the controller is unable to monitor the data model changes properly. It is recommended to use the $watch service in the link function. 
9.controller
Can be a string or a function.
If it is a string, use the string as the name of the controller to find the constructor of the controller registered in the application
Angular.module (' myApp ', []). directive (' mydirective ', function () {restrict: ' A ',//always requires controller: ' Somecontroller '}) Other places in the application can be the same file or another file contained by index.html Angular.module (' myApp '). Controller (' Somecontroller ', function ($scope, $ Element, $attrs, $transclude) {//Controller logic put here});
It can also be defined directly inside the directive as an anonymous function, and we can inject any service here ($log, $timeout, etc.)
Angular.module (' myApp ', []). directive (' mydirective ', function () {restrict: ' A ', controller:function ($scope, $element , $attrs, $transclude) {//Controller logic put here}});
In addition, there are special services (parameters) that can be injected
(1) $scope, the scope associated with the instruction element
(2) $element, the element corresponding to the current instruction
(3) $attrs, an object consisting of the attributes of the current element
(4) $transclude, embedded link function, actually executed to clone the element and manipulate the DOM function
Note: It is generally not recommended to use this unless it is used to define some reusable behavior.
The controller of the instruction and the link function (which is said later) can be interchanged. The difference is that the controller is primarily used to provide the behavior that can be reused between instructions, but the link linkage function can only define the behavior in the current internal instruction and can no longer be reused between instructions.
<! DOCTYPE html>
Output Result:

and output Hello everyone under the console
Let's take a look at $transclude (); Here, it can receive two parameters, the first is $scope, the scope, and the second is a callback function with the parameter clone. This clone is actually embedded (in jquery packaging) and can do a lot of DOM operations on it.
And the simplest way to use it is
<script>    angular.module (' myApp ', []). directive (' MySite ', function () {     return {         restrict: ' EA ',         Transclude:true,         Controller:         function ($scope, $element, $attrs, $transclude, $log) {             var a = $ Transclude (); $transclude () is the embedded content             $element. append (a);         }     };}); </script>
Note: Using $transclude will generate a new scope.
By default, if we are simple and practical $transclude (), then the default scope is the scope of the $transclude build
But if we use $transclude ($scope, function (clone) {}), then scope is the scope of directive
Then the question comes again. What if we want to use the parent scope?
You can use $scope. $parent
In the same vein you want a new scope you can also use $scope. $parent. New (); 10.controllerAs
The function of this option is to set the alias of your controller
Usually we used to write code in this way:
Angular.module ("App", [])  . Controller ("Democontroller", ["$scope", function ($scope) {    $scope. title = " Angualr ";  }]) <div ng-app= "App" ng-controller= "Democontroller" >      {{title}}</div>
Later angularjs1.2 brought us new grammatical sugars, so we could write
Angular.module ("App", [])  . Controller ("Democontroller", [function () {    this.title = "angualr";  }])  <div ng-app= "App" Ng-controller= "Democontroller as Demo" >       {{demo.title}}  </div>
We can do the same thing again.
<script>    angular.module (' myApp ', []). directive (' MySite ', function () {     return {         restrict: ' EA ',         Transclude:true,         controller: ' Somecontroller ',         controlleras: ' Maincontroller '         //. Other configuration     }; }); </script>
11.require (string or array)
The string represents the name of another instruction, which will be the fourth parameter of the link function. For specific use, we can give an example. Let's say we're going to write two instructions, and there are many coincident methods in the link function in the two instructions (as the link function says). At this point we can write these repeated methods in the controller of the third instruction (also mentioned above that the controller is often used to provide multiplexing between instructions) and then in these two instructions, require the command with the Controller field (the third command) ，
These coincident methods can then be referenced by the fourth parameter of the link linking function.
<!doctype html>
The instructions in the example above innerdirective and instructions innerDirective2 the method defined in the controller of the instruction Outerdirective.
It is further explained that the Controller in the directive is used to communicate between different instructions.
In addition, we can add one of the following prefixes to the Require parameter value, which will change the behavior of the lookup controller:
(1) without a prefix, the instruction will be found in the controller provided by itself, and if no controller is found, an error will be thrown
(2)? If the required controller is not found in the current instruction, NULL is passed to the fourth parameter of the link connection function
(3) ^ If the required controller is not found in the current instruction, the controller of the parent element is looked up
(4)? ^ combination
The instruction compilation process for 12.Anguar
First load the Angularjs library, find the ng-app instruction, and find the application boundary,
By invoking the $compile service to compile according to the scope defined by Ng-app, ANGULARJS traverses the entire HTML document and processes the individual instructions declared on the page according to the definition of the instruction in JS according to the precedence (priority) of the instruction, according to the configuration parameters in the instruction ( Template,place,transclude, etc.) convert the DOM and then start the compile function of each instruction sequentially (if the directive has a defined compile function) to convert the template itself
Note: The compile function here is configured in our instructions and is not the same as the $compile service described above. Each compile function returns a link function, and all the link functions will synthesize a large link function.
The large link function is then executed, primarily data binding, by registering listeners on the DOM to dynamically modify the data in the scope, or by using $watchs to listen to variables in scope to modify the DOM, thus establishing two-way binding, and so on. If the compile function is not configured in our instruction, then the link function that we configure will run, and what she does is roughly the same as the large link function synthesized by all the link functions after the Complie return.
So: the compile in the directive is mutually exclusive to the link option, and if both options are set, the function returned by compile is treated as a link function, and the link option itself is ignored
13. Compiler function Compile functions

function compile (telement, Tattrs, transclude) {...}
The compile function is used to handle situations where the template DOM needs to be modified. Because most instructions do not need to modify the template, this function is not commonly used. Examples that need to be used are ngtrepeat, which need to be modified, and Ngview, which requires asynchronous loading of content. The compilation function accepts the following parameters.

telement-template element-The elements in which the directive resides. It is safe to deform such an element and its child elements.
Tattrs-template attributes-attributes of all directives declared on this element, which are shared in the compilation function.
transclude-an embedded link function functions (scope, CLONELINKINGFN).
Note: Do not perform any operations outside of the DOM transformation in the compilation function. More importantly, the registration of DOM listener events should be done in the link function, not in the compilation function.
A compilation function can return an object or function.
The return function-is equivalent to the link function registered with the Link property of the configuration object when the compilation function does not exist.
Return object-Returns an object that has registered a function through the pre or post property. Refer to the explanations below for the pre-linking and post-liking functions.
14. Link Functions linking function

function link (scope, ielement, Iattrs, controller) {...}
The link function is responsible for registering DOM events and updating the DOM. It is executed after the template has been cloned, and it is also where most of the instruction logic code is written.
Scope-the scope in which the instruction needs to be monitored.
ielement-instance element-The elements in which the directive resides. It is only safe to operate on the child elements of the element in the Postlink function, because they are all linked well at that time.
Iattrs-instance attributes-instance properties, a normalized, all attribute list declared on the current element, which is shared across all linked functions.
Controller-An instance of the director, which is the current instruction direct2 the internal controller through the instruction of the require request. For example: Controller:function () {this.addstrength = function () {}} in the DIRECT2 directive, then, in the link function of the current instruction, You can make the call through Controller.addstrength.
The Pre-linking function executes before the child element is linked. cannot be used to deform the DOM in case the link function cannot find the correct element to link to.
post-linking function all elements are linked and executed.
Description
The compile option itself will not be used frequently, but the link function will be used frequently. Essentially, when we set the link option, we actually created a postlink () Link function so that the compile () function can be defined as a link function. Typically, if you set the compile function, we want DOM operations to be done before the instruction and real-time data is put into the DOM, where DOM operations such as adding and deleting nodes are safe. The compile and link options are mutually exclusive. If both options are set, the function returned by compile is treated as a link function, and the link option itself is ignored. the translation function is responsible for converting the template dom. The link function is responsible for linking the scope and the DOM . The DOM can be manipulated manually before the scope is linked to the DOM. In practice, this kind of operation is very rare when writing custom directives, but there are several built-in directives that provide such functionality. Link functions are optional. if a compilation function is defined, it returns a link function , so the compilation function overloads the link function when all two functions are defined. If our instructions are simple and do not require additional settings, you can return a function from the factory function (callback function) in place of the object. If you do this, the function is a link function. 




Follow me to learn angularjs:directive instruction usage interpretation (next)