ANGULARJS global scope and isolate scope communication usage example _ANGULARJS

This article illustrates the ANGULARJS global scope and isolate scope communication usage. Share to everyone for your reference, specific as follows:

At the time of project development, the global scope and Directive local scope usage is not clear enough, global scope and Directive local scope communication are not fully understood, and here is a summary of the use of global scope and Directive 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

<div ng-controller= "Myctrl" >
  <button ng-click= "show=true" >show</button>
  <dialog Title= "Hello}"
      visible= "}"
      on-cancel= "show=false;"
      On-ok= "Show=false;parentscope ();" >
    <!--above On-cancel, ON-OK, is directive in the Isoloate scope through & reference.
    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>
      <!--This can be played here. ~names is parent scope's-->
      <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>

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 ("defined in scope & defined in the parent scope");
    };
    $scope. Changecount = function () {$scope. Person.count = $scope. Person.count + 1; //Listen for controller count changes and issue an event broadcast, and then directive the Count Countstatuschange Change event $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: [' <divng-show= "Visible" > ', '  

I hope this article will help you with ANGULARJS programming.