AngularJS global scope and Isolatescope communication usage example

AngularJS global scope and Isolatescope communication usage example this article describes AngularJS global scope and Isolate scope communication usage. We will share this with you for your reference. The details are as follows:

During project development, the scope of global scope and directive local scope is not clear enough, and the communication between global scope and directive local scope is not thorough enough, here we will summarize the use of global scope and directive local scope.

I. scope

1. In AngularJS, subscopes generally inherit attributes and methods of their parent scopes through the JavaScript prototype Inheritance Mechanism. But there is one exception: using scope: {...} in directive :{...}, the scope created in this way is an independent "Isolate" scope. It also has a parent scope, but the parent scope is not in its prototype chain and does not perform prototype inheritance on the parent scope. The scope defined in this way is usually used to construct reusable directive components.

2. If we access an attribute defined in the parent scope in the subscope, JavaScript first searches for this attribute in the subscope, but does not find it in the parent scope of the prototype chain, if you haven't found the parent scope of the previous prototype chain, search for it again. In AngularJS, the top of the scope prototype chain is $ rootScope, and JavaScript searches for $ rootScope.

3. scope: {...}-directive creates an independent "Isolate" scope without prototype inheritance. This is the best choice for creating reusable directive components. Because it does not directly access/modify attributes of the parent scope, it does not produce unexpected side effects.

Ii. Isolate scope reference Modifier

1. = or = the attributes of the attr "Isolate" scope are bound to the attributes of the parent scope in two directions. Any modification by either party affects the other. This is the most common method;

2. @ or @ attr one-way binding between attributes of the "Isolate" scope and attributes of the parent scope, that is, the "Isolate" scope can only read values of the parent scope, and the value is always of the String type;

3. & or & attr "Isolate" scopes encapsulate attributes of the parent scope into a function to read and write attributes of the parent scope as a function. The packaging method is $ parse.

Iii. data transmission and communication between direve VE and controller

1. The parent controller listens to the global scope (parent scope) variable and broadcasts the event to the subscope (directive scope, each directvie has its own independent scope)

2. directive defines the local scope and displays the reference global scope through the =, @, & (method) characters

3. directive scope (subscope) uses parent [$ scope. $ parent. xxx] to reference attributes of global scope.

4. ctive monitors global scope variable changes. You can use the $ scope. $ parent. $ watch Method

Iv. instance description

  Show  
      
   Body goes here: username :}, title :}.
  
 
 
      
        
  
  
}
    
 
 
    
Email:    
    
Count:      Count Plus 1    
    
  

Controller Test code:

Var app = angular. module ("Dialog", []); app. controller ("MyCtrl", function ($ scope) {$ scope. person = {Count: 0}; $ scope. email = 'Carl @ 126.com '; $ scope. names = ["name1", "name2", "name3"]; $ scope. show = false; $ scope. username = "carl"; $ scope. title = "parent title"; $ scope. parentScope = function () {alert ("the stuff defined in scope through & is defined in parent scope") ;}; $ scope. changeCount = function () {$ scope. person. count = $ Scope. person. count + 1;} // listen for controller count changes, issue event broadcasts, and then listen for count CountStatusChange change events in directive $ scope. $ watch ('person. count', function (newVal, oldVal) {console. log ('>>> parent Count change:' + $ scope. person. count); if (newVal! = OldVal) {console. log ('>>> parent $ broadcast count Chang'); $ scope. $ broadcast ('countstatuschang', {"val": newVal}) }}); app. directive ('Dialog ', function factory () {return {priority: 100, template :['
','}','
','
','OK','Close','
','
']. Join (""), replace: false, transclude: true, restrict: 'E', scope: {title: "@", // reference the value of the dialog tag title attribute visible: "@", // reference the value onOk: "&" of the visible attribute of the dialog tag, // onCancel of the on-OK attribute of the dialog tag in the form of wrapper function: "&" // reference the content of the on-cancel attribute of the dialog tag in the form of wrapper function}, controller: ['$ scope', '$ attrs', function ($ scope, $ attrs) {// directive scope title uses @ to reference the value of the dialog tag title attribute, so the value can be obtained here. console. log ('>>> title:' + $ scope. title); >>> title: Hello carl scope.html: 85 // you can use $ parent to directly obtain the parent scope variable page on the console. log ('>>> parent username:' + $ scope. $ parent. username); >>> parent username: carl // directive scope does not define the username variable, and the parent scope username variable is not referenced. Therefore, this is the undefined console. log ('>>> child username:' + $ scope. username); >>> username: undefined // receives the count change event broadcast by the parent controller $ scope. $ on ('countstatuschang', function (event, args) {console. log ("child scope on (listener) recieve count Change event:" + args. val) ;}); // watch parent controller scope object $ scope. $ parent. $ watch ('person. count', function (newVal, oldVal) {console. log ('>>>>>>> child watch parent scope [Count]:' + oldVal + 'newval: '+ newVal) ;}] };});