Angularjs Introductory experience 4--dead knock instruction Scope

The previous "Angularjs Primer 3--html's hands-on instruction" introduced the concept and function of the directive. Already and instructions have played a face-to-face, it will not be so strange, today is mainly introduced is a troubled me for a long time finally figured out the problem, this problem with scope , can be regarded as the "Angularjs Introductory experience Directive and controller how to communicate "in the scope of the supplement and extension.

As a child, the teacher taught us to elephant this idiom, teach us to know things can not be one-sided, lack of a global understanding of things. So, speaking of instructions, it's a complete structure as follows:

Angular.module (' myApp ', []). directive (' mydirective ', function () {     return {         restrict:string, priority         : Number,         Terminal:boolean,         template:string or template function:     function (TElement, tattrs) {...},     Templateurl:string,     Replace:boolean or String,     Scope:boolean or Object,     Transclude:boolean,     Controller:string or     function (scope, element, Attrs, transclude, Otherinjectables) {...},     Controlleras: String,     require:string,     link:function (scope, ielement, Iattrs) {...},     compile://Returns an object or Join function as follows: C16/>function (TElement, Tattrs, transclude) {         return {             pre:function (scope, ielement, Iattrs, Controller) { ...},             post:function (scope, ielement, Iattrs, controller) {...}            }         return function Postlink (...) { ... }         }     };  });

　　

At a glance, we see the previous article has an introduction to the parameter restrict, which includes elements, attributes, annotations, and class names in four different forms. Looking back, it was a bit of a mask, many have not seen. It doesn't matter, we don't care, not all parameters we have to master, not all parameters we will be in the normal development of programming to use. But in order to explain today's topic more conveniently, we need to know a few parameters first:

　　(1) Templateurl

This parameter is an optional parameter and can be:

A string representing the path of an external HTML file , such as Templateurl: ' my-dialog.html ';

A function that can be followed by two parameters , with parameters TElement and Tattrs and returning an external HTML file path string, such as Templateurl:function (Elem, attr) {return attr.value + ". html"

　　(2) transclude

This parameter is an optional parameter. The default value is False. The inside of the instruction can access the scope of the external directive , and the template can also access the outer scope object . In order to pass the scope in, the value of the scope parameter must be set to the isolation scope by {} or True . If the scope parameter is not set, the scope within the directive is set to the scope of the incoming template.

Example:

Index.html:

Script.js:　
(function (angular) {  ' use strict '; Angular.module (' docstransclusiondirective ', [])  . Controller (' Controller ', [' $scope ', function ($scope) {    $scope. Name = ' Tobias ';  }])  . directive (' Mydialog ', function () {    return {      restrict: ' E ',      transclude:true,      templateurl: ' My-dialog.html '    };})  (Window.angular);
My-dialog.html:
<div class= "alert" ng-transclude></div>
　　Page display:
From index.html we see that a custom label is defined, which can be called a directive <my-dialog></my-dialog>. As we can see from the script.js, the parameters transclude and Templateurl are added, and the two are used together. The main function is to put the contents of the DOM in the place where it found the ng-transclude directive.
The workflow for the entire example is as follows:
In this example, the "Check out the contents, {{name}}!" displayed in the div tag in my-dialog.html. At the same time,{{name}} can read to the scope outside the instruction , that is, the value of Scope.name in the controller.
With the above bedding, we can introduce today's theme, first serve the dishes
Index.html:
<!doctype html>
　　
Script.js:
(function (angular) {  ' use strict '; Angular.module (' Docstransclusionexample ', [])  . Controller (' controller '), [' $scope ', function ($scope) {    $scope. Name = ' Tobias ';  }])  . directive (' Mydialog ', function () {    return {      restrict: ' E ',      transclude:true,      scope: {},      Templateurl: ' my-dialog.html ',      link:function (scope, Element) {        scope.name = ' Jeff ';      }    };  }) (Window.angular);
　　
My-dialog.html:
<div class= "alert" ng-transclude></div>
　　
It is mainly divided into the following situations:
　　1. There is no transclude, scope, Templateurl, link parameters in Script.js
(function (angular) {  ' use strict '; Angular.module (' Docstransclusionexample ', [])  . Controller (' controller '), [' $scope ', function ($scope) {    $scope. Name = ' Tobias ';  }])  . directive (' Mydialog ', function () {    return {      restrict: ' E ',    };  });}) (Window.angular);
　　
This is one of the cleanest cases where the value of {{name}} in Index.html is read as "Tobias" in the controller controllers.
　　2. No transclude, scope, templateurl parameters in Script.js
(function (angular) {  ' use strict '; Angular.module (' Docstransclusionexample ', [])  . Controller (' controller '), [' $scope ', function ($scope) {    $scope. Name = ' Tobias ';  }])  . directive (' Mydialog ', function () {    return {      restrict: ' E ',      link:function (scope, Element) {        Scope.name = ' Jeff ';}};}  ) (Window.angular);
　　
The link parameter is added here, and the final result is "Check out the contents, Jeff," which is a link function returned after the angular compiler complie, which can be seen after controller controllers, So eventually Tobias was covered by Jeff.
　　3. Script.js No scope
(function (angular) {  ' use strict '; Angular.module (' Docstransclusionexample ', [])  . Controller (' controller '), [' $scope ', function ($scope) {    $scope. Name = ' Tobias ';  }])  . directive (' Mydialog ', function () {    return {      restrict: ' E ',      transclude:true,      templateurl: ' My-dialog.html ',      link:function (scope, Element) {        scope.name = ' Jeff ';      }    };  }) (Window.angular);
　　
At this point, there is no scope scope, which indicates a shared scope. That is, the directive shares the scope of the external controller directly, at this time the scope in the directive is closely related to the controller, so at this point, Scope.name is re-assigned in the link of the instruction, when the name in the controller and instruction is updated to Jeff.
　　4. Script.js includes transclude, scope, Templateurl, and link
(function (angular) {  ' use strict '; Angular.module (' Docstransclusionexample ', [])  . Controller (' controller '), [' $scope ', function ($scope) {    $scope. Name = ' Tobias ';  }])  . directive (' Mydialog ', function () {    return {      restrict: ' E ',      transclude:true,      scope: {},      Templateurl: ' my-dialog.html ',      link:function (scope, Element) {        scope.name = ' Jeff ';      }    };  }) (Window.angular);
　　
Add scope:{} Here, in fact, can also be written as scope:true. This declaration indicates that directive has its own independent scope, but this scope replicates all variables in the external controller to its scope scope when the directive is instantiated. This will result in the final output or Tobias, not Jeff.
　　5. Isolate scope
Details are already in the "Angularjs Primer 1--directive and controller How to communicate" introduction, here no longer repeat.
This article mainly introduces some parameters in the directive and emphatically introduces the personal understanding of scope, if there are shortcomings, please feel free ^_^.
　　This article link: "Angularjs Introduction experience 4--death knock instruction Scope"
If you feel that reading this article is helpful to you, please click " recommend " button, your "recommendation" will be my biggest writing motivation! If you want to keep an eye on my article, please scan the QR code, follow Jackiezheng's public number, I will push my article to you and share with you the high-quality articles I have read every day.
　　
Angularjs Introductory experience 4--dead knock instruction Scope