Beispiel für die Verwendung des globalen AngularJS-Bereichs und der Kommunikation mit dem Isolate-Bereich

Das Beispiel in diesem Artikel beschreibt die Kommunikationsnutzung zwischen dem globalen AngularJS-Bereich und dem Isolate-Bereich. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Während der Projektentwicklung ist der Verwendungsbereich des globalen Bereichs und des lokalen Richtlinienbereichs nicht klar genug, und die Kommunikation zwischen dem globalen Bereich und dem lokalen Richtlinienbereich ist unklar Nicht gründlich genug. Hier ist der globale Geltungsbereich und die Direktive. Fassen wir die Verwendung des lokalen Geltungsbereichs zusammen.

1. Bereich

1. In AngularJS erben untergeordnete Bereiche im Allgemeinen die Eigenschaften und Methoden ihres übergeordneten Bereichs über den prototypischen Vererbungsmechanismus von JavaScript. Es gibt jedoch eine Ausnahme: Wenn Sie „scope: { ... }“ in einer Direktive verwenden, ist der auf diese Weise erstellte Bereich ein unabhängiger „Isolate“-Bereich. Er verfügt auch über einen übergeordneten Bereich, der sich jedoch nicht in seiner Prototypenkette befindet . Es gibt keine prototypische Vererbung vom übergeordneten Bereich. Die Definition des Bereichs auf diese Weise wird normalerweise zum Erstellen wiederverwendbarer Direktivenkomponenten verwendet.

2. Wenn wir auf eine im übergeordneten Bereich definierte Eigenschaft im untergeordneten Bereich zugreifen, sucht JavaScript zunächst im untergeordneten Bereich Wird es nicht gefunden, wird es im übergeordneten Bereich der Prototypenkette gesucht. Wenn es nicht gefunden wird, wird im übergeordneten Bereich der vorherigen Prototypenkette gesucht. In AngularJS ist die Spitze der Bereichsprototypkette $rootScope, und JavaScript sucht bis $rootScope.

3. Bereich: { ... } – Die Direktive erstellt einen unabhängigen „Isolieren“-Bereich ohne Prototypenerbung. Dies ist die beste Option zum Erstellen wiederverwendbarer Direktivenkomponenten. Da nicht direkt auf die Eigenschaften des übergeordneten Bereichs zugegriffen bzw. diese geändert werden, treten keine unerwarteten Nebenwirkungen auf.

2. Isolate-Bereichsreferenzmodifikatoren

1. Die Attribute des „Isolate“-Bereichs sind in beide Richtungen an die Attribute des übergeordneten Bereichs gebunden Affekt Dies ist die am häufigsten verwendete Methode.

2. Die Attribute des „Isolate“-Bereichs sind unidirektional an die Attribute des übergeordneten Bereichs, also des „Isolate“-Bereichs, gebunden kann nur den Wert des übergeordneten Bereichs lesen, und der Wert ist immer vom Typ String; der übergeordnete Bereich auf funktionale Weise, die Verpackungsmethode ist $parse

3. Direktive und Controller-Datenübertragung

1 Bereich)-Variable und sendet Ereignisse an den untergeordneten Bereich (Direktbereich, jede Direktive hat ihren eigenen unabhängigen Bereich)

2. Die Direktive definiert den lokalen Bereich und zeigt den Verweis auf den globalen Bereich durch =, @, & ( Methode) Zeichen

3. Der Anweisungsbereich (Subscope) bezieht sich auf die Eigenschaften des globalen Bereichs über parent[$scope.$parent.xxx]

4 kann die Methode $scope.$parent.$watch verwenden

Beispielbeschreibung

Controller-Testcode:

<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>

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);
        });
      }]
    };
});