Front-End ANGULARJS framework global scope and isolate scope communication

At the time of project development, the global scope and Directive local scope use is not clear enough, global scope and Directive local scope communication is not enough perspective, here is a summary of global scope and directive use of local scope.

I. Scope scope

1. In Angularjs, child scopes generally inherit the properties and methods of their parent scopes through the JavaScript prototype inheritance mechanism. There is one exception: using scope in directive: {...}, the scope created in this way is a separate "isolate" scope, it also has a parent scope, but the parent scope is not on its prototype chain and does not inherit from the parent scope. This approach defines a scope that is typically used to construct reusable directive components.

2, if we access a property defined in a parent scope in a child scope, JavaScript first looks for the attribute in the child scope, finds it again from the parent scope on the prototype chain, and finds the parent scope of the previous prototype chain if it is not found. In Angularjs, the top of the scope prototype chain is $rootscope,javascript to find $rootscope.

3. Scope: {...}-directive creates a separate "isolate" scope with no prototype inheritance. This is the best choice for creating reusable directive components. Because it does not directly access/modify the properties of the parent scope, it does not produce unexpected side effects.

Ii. Isolate scope Reference modifier

1. = or =attr the properties of the "isolate" scope are bound to the properties of the parent scope, and the modification of any party affects the other, which is the most commonly used method;

2. The properties of the @ or @attr "isolate" scope are bound to the properties of the parent scope, that is, the "isolate" scope can only read the value of the parent scope, and the value is always of type string;

3. The & or &attr isolate scope wraps the properties of the parent scope into a function that reads and writes the properties of the parent scope as a function, and the wrapper method is $parse

III. directive and controller data transmission and communication

1. The parent controller listens to global scope (parent scope) variables and broadcasts events to the child scope (Directive scope, each Directvie has its own scope scope)

2. Directive defines local scope and refers to global scope by =, @, & (method) characters

3. Directive scope (sub scope) refers to global scope properties by parent[$scope. $parent. xxx]

4, Directive listening to global scope variable changes, can pass $scope. $parent. $watch method

Iv. illustration of the case

The code is as follows

<div ng-controller= "Myctrl" > <button ng-click= "Show=true" >show</button> <dialog title= "Hello}" Visible= "}" On-cancel= "Show=false;" On-ok= "Show=false;parentscope ();" > The On-cancel, On-ok, above the <!--, are referenced by & in Directive's isoloate scope. If the expression contains a function, you need to bind the function to the parent scope (currently the scope of Myctrl)--> Body goes Here:username:}, Title:}. <ul> <!--can play like this here ~names is the--> of parent scope <li ng-repeat= "name in Names" >}</li> </ul> <div> Email:<input type= "text" ng-model= "email" style= "width:200px;height:20px"/> </div> <div> Count:<input type= "text" ng-model= "person. Count "style=" width:120px;height:20px "/> <button ng-click= "Changecount ()" >count plus 1</button> </div> <p></p> </dialog> </div>

ontroller 测试代码:

The code is as follows

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("Dongdong passed & defined in the scope is defined in the parent scope");    }; $scope. Changecount = function () { $scope. Person.count = $scope. Person.count + 1; } Listens for controller count changes, emits event broadcasts, and then listens 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 Change '); $scope. $broadcast (' Countstatuschange ', {"Val": newval}) } }); }); App.directive (' dialog ', function Factory () { return { PRIORITY:100, Template: [' <div ng-show= ' visible ' > ', ' ' <div class= ' body ' ng-transclude></div> ', ' <div class= ' footer ' > ', ' <button ng-click= ' OnOK () ">OK</button>", ' <button ng-click= ' OnCancel () ">Close</button>", ' </div> ', ' </div> '].join (""), Replace:false, Transclude:true, Restrict: ' E ', Scope: { Title: "@",//refers to the value of the dialog label Title property Visible: "@",//refers to the value of the dialog label Visible property OnOK: "&",//to refer to the contents of the On-ok property of the dialog label in wrapper function form OnCancel: "&" refers to the contents of the On-cancel property of the dialog label in wrapper function form }, Controller: [' $scope ', ' $attrs ', function ($scope, $attrs) { Directive scope Title by @ references the value of the dialog tag Title property, so you can get a value here Console.log (' >>>title: ' + $scope. title); >>>title:hello Carl Scope.html:85 Getting the parent scope variable page directly via $parent can Console.log (' >>>parent username: ' + $scope. $parent. Username); >>>parent Username:carl Directive scope does not define username variables and does not reference the parent scope username variable, so this is undefined Console.log (' >>>child username: ' + $scope. username); >>>username:undefined           / Receives the Count Change event            $scope broadcast by the parent controller. $on (' Countstatuschange ', 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 '; });        }]    }; });