AngularJS 전역 범위 및 격리 범위 통신 사용 예

이 기사의 예에서는 AngularJS 전역 범위와 Isolate 범위 간의 통신 사용법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 사항은 다음과 같습니다.

프로젝트 개발 중에 전역 범위와 지시문 로컬 범위의 사용 범위가 충분히 명확하지 않으며 전역 범위와 지시문 로컬 범위 간의 통신은 다음과 같습니다. 충분히 철저하지 않습니다. 여기에 전역 범위와 지시문이 있습니다. 지역 범위의 사용을 요약해 보겠습니다.

1. 범위

1. AngularJS에서 하위 범위는 일반적으로 JavaScript 프로토타입 상속 메커니즘을 통해 상위 범위의 속성과 메서드를 상속합니다. 그러나 예외가 있습니다. 지시문에서 범위: { ... }를 사용할 때 이런 방식으로 생성된 범위는 독립적인 "격리" 범위입니다. 또한 부모 범위가 있지만 부모 범위는 프로토타입 체인에 없습니다. . 상위 범위로부터의 프로토타입 상속은 없습니다. 이러한 방식으로 범위를 정의하는 것은 일반적으로 재사용 가능한 지시문 구성 요소를 구성하는 데 사용됩니다.

2. 하위 범위의 상위 범위에 정의된 속성에 액세스하면 JavaScript는 먼저 하위 범위에서 해당 속성을 찾습니다. 발견되지 않으면 프로토타입 체인의 상위 범위에서 검색됩니다. 발견되지 않으면 이전 프로토타입 체인의 상위 범위에서 검색됩니다. AngularJS에서 범위 프로토타입 체인의 최상위는 $rootScope이고 JavaScript는 $rootScope.

3. 범위: { ... } - 지시문은 프로토타입 상속 없이 독립적인 "격리" 범위를 생성합니다. 이는 재사용 가능한 지시어 구성 요소를 생성하는 데 가장 적합한 옵션입니다. 상위 범위의 속성에 직접 액세스/수정하지 않기 때문에 예상치 못한 부작용이 발생하지 않습니다.

2. 격리 범위 참조 수정자

1. = 또는 =attr "격리" 범위의 속성은 양쪽의 수정 사항에 양방향으로 바인딩됩니다. 영향 가장 일반적으로 사용되는 방법입니다.

2. @ 또는 @attr "격리" 범위의 속성은 상위 범위, 즉 "격리" 범위의 속성에 단방향으로 바인딩됩니다. 상위 범위의 값만 읽을 수 있으며 값은 항상 문자열 유형입니다.

3. & 또는 &attr "격리" 범위는 상위 범위의 속성을 함수로 래핑하여 읽고 씁니다. 기능적인 방식으로 상위 범위 도메인 속성, 패키징 방법은 $parse

3. 지시문 및 컨트롤러 데이터 전송 및 통신

1. 상위 컨트롤러는 전역 범위(상위 범위)를 수신합니다. ) 변수를 사용하여 하위 범위에 이벤트를 브로드캐스트합니다(지시문 범위, 각 directvie에는 자체 독립 범위가 있음)

2. 지시문은 로컬 범위를 정의하고 =, @, &(메서드)를 통해 전역 범위에 대한 참조를 표시합니다. ) 문자

3. 지시어 범위(하위 범위)는 부모[$scope.$parent.xxx]

를 통해 전역 범위의 속성을 참조합니다. 4. 지시어는 전역 범위 변수의 변경 사항을 모니터링하고 $scope.$parent.$watch 메소드를 사용할 수 있습니다

4. 설명 예시

<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 id="">}</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);
        });
      }]
    };
});