AngularJS global scope and Isolate scope communication usage example

The example in this article describes the communication usage between AngularJS global scope and Isolate scope. Share it with everyone for your reference, the details are as follows:

During project development, the usage 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 is the use of global scope and directive local scope. conclude.

1. Scope

1. In AngularJS, child scopes generally inherit the properties and methods of their parent scope through the JavaScript prototype inheritance mechanism. But there is an exception: when using scope: { ... } in a directive, the scope created in this way is an independent "Isolate" scope. It also has a parent scope, but the parent scope is not on its prototype chain. There is no prototypal inheritance from the parent scope. Defining scopes in this way is usually used to construct reusable directive components.

2. If we access a property defined in the parent scope in the child scope, JavaScript first looks for the property in the child scope. If it is found, it will be searched from the parent scope on the prototype chain. If it is not found yet, it will be searched for in the parent scope of the upper prototype chain. In AngularJS, the top of the scope prototype chain is $rootScope, and JavaScript searches until $rootScope.

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

2. Isolate scope reference modifier

1. = or =attr The attributes of the "Isolate" scope are two-way bound to the attributes of the parent scope. Modifications on either side will affect the other. This is the most commonly used method. ;

2. @ or @attr The attributes of the "Isolate" scope are one-way bound to the attributes of the parent scope, that is, the "Isolate" scope can only read the value of the parent scope, and the value is always a String Type;

3. & or &attr "Isolate" scope wraps the attributes of the parent scope into a function, thereby reading and writing the attributes of the parent scope in a functional way. The packaging method is $parse

3. Directive and controller Data transfer and communication

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

2. The directive defines the local scope, Display references to the global scope through =, @, & (method) characters

3. Directive scope (subscope) references the properties of the global scope through parent[$scope.$parent.xxx]

4. Directive monitors global scope variable changes , you can use the $scope.$parent.$watch method

IV. Example description

<div ng-controller="MyCtrl">
  <button ng-click="show=true">show</button>
  <dialog title="Hello }"
      visible="}"
      on-cancel="show=false;"
      on-ok="show=false;parentScope();">
    <!--上面的on-cancel、on-ok，是在directive的isoloate scope中通过&引用的。
    如果表达式中包含函数，那么需要将函数绑定在parent scope（当前是MyCtrl的scope）中-->
    Body goes here: username:} , title:}.
    <ul>
      <!--这里还可以这么玩~names是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加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("scope里面通过&定义的东东，是在父scope中定义");
    };
    $scope.changeCount = function () {
      $scope.person.Count = $scope.person.Count + 1;
    }
    // 监听controller count变更, 并发出事件广播,再directive 中 监听count CountStatusChange变更事件
    $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: [&#39;<div ng-show="visible">&#39;,
        &#39;  <h3>}</h3>&#39;,
        &#39;  <div class="body" ng-transclude></div>&#39;,
        &#39;  <div class="footer">&#39;,
        &#39;    <button ng-click="onOk()">OK</button>&#39;,
        &#39;    <button ng-click="onCancel()">Close</button>&#39;,
        &#39;  </div>&#39;,
        &#39;</div>&#39;].join(""),
      replace: false,
      transclude: true,
      restrict: &#39;E&#39;,
      scope: {
        title: "@",//引用dialog标签title属性的值
        visible: "@",//引用dialog标签visible属性的值
        onOk: "&",//以wrapper function形式引用dialog标签的on-ok属性的内容
        onCancel: "&"//以wrapper function形式引用dialog标签的on-cancel属性的内容
      },
      controller: [&#39;$scope&#39;, &#39;$attrs&#39;, function ($scope, $attrs) {
        // directive scope title 通过@ 引用dialog标签title属性的值，所以这里能取到值
        console.log(&#39;>>>title:&#39; + $scope.title);
        >>>title:Hello carl scope.html:85
        // 通过$parent直接获取父scope变量页可以
        console.log(&#39;>>>parent username:&#39; + $scope.$parent.username);
        >>>parent username:carl
        // directive scope 没有定义username 变量,并且没有引用父scope username变量, 所以这里是undefined
        console.log(&#39;>>>child username:&#39; + $scope.username);
        >>>username:undefined
        // 接收由父controller广播count变更事件
        $scope.$on(&#39;CountStatusChange&#39;, function (event, args) {
          console.log("child scope on(监听) recieve count Change event :" + args.val);
        });
        // watch 父 controller scope对象
        $scope.$parent.$watch(&#39;person.Count&#39;, function (newVal, oldVal) {
          console.log(&#39;>>>>>>>child watch parent scope[Count]:&#39; + oldVal + &#39; newVal:&#39; + newVal);
        });
      }]
    };
});