Angularjs의 컨트롤러 간 통신 메커니즘 분석 예

이 기사의 예에서는 Angularjs의 컨트롤러 간 통신 메커니즘을 설명합니다. 참고하실 수 있도록 공유해 드리며 자세한 내용은 다음과 같습니다.

Angularjs 개발 경험을 정리해보면 지나치게 크고 전능한 갓 컨트롤러를 피하기 위해 업무에 따라 앵귤러 컨트롤러를 구분해야 한다는 언급이 있었습니다. .컨트롤러를 분리했지만 때로는 컨트롤러에서 통신해야 하는데 이는 일반적으로 비교적 간단한 통신 메커니즘입니다. JavaScript 프로그래머라면 자연스럽게 비동기 콜백 반응 통신, 즉 이벤트 메커니즘(또는 메시지 메커니즘)을 떠올릴 것입니다. 예, 이것이 컨트롤러 간의 통신을 해결하기 위한 Anglejs의 메커니즘입니다. 간단히 말해서 이것이 Angle 방식입니다.

Angularjs는 범위 내에서 버블링 및 터널링 메커니즘을 제공합니다. $broadcast는 이벤트를 모든 하위 컨트롤러에 브로드캐스팅하고 $emit는 이벤트를 버블링하여 Angularjs 이벤트 등록에 전달합니다. 이 기능을 사용하면angularjs 방식으로angularjs 컨트롤러 간의 통신을 신속하게 해결할 수 있습니다. 코드는 다음과 같습니다.

보기:

<div ng-app="app" ng-controller="parentCtr">
  <div ng-controller="childCtr1">name :
    <input ng-model="name" type="text" ng-change="change(name);" />
  </div>
  <div ng-controller="childCtr2">Ctr1 name:
    <input ng-model="ctr1Name" />
  </div>
</div>

컨트롤러:

angular.module("app", []).controller("parentCtr",
function ($scope) {
  $scope.$on("Ctr1NameChange",
  function (event, msg) {
    console.log("parent", msg);
    $scope.$broadcast("Ctr1NameChangeFromParrent", msg);
  });
}).controller("childCtr1", function ($scope) {
  $scope.change = function (name) {
    console.log("childCtr1", name);
    $scope.$emit("Ctr1NameChange", name);
  };
}).controller("childCtr2", function ($scope) {
  $scope.$on("Ctr1NameChangeFromParrent",
  function (event, msg) {
    console.log("childCtr2", msg);
    $scope.ctr1Name = msg;
  });
});

여기에서 childCtr1의 이름 변경이 상위 컨트롤러에 버블링되고 상위 컨트롤러는 이벤트를 래핑하고 브로드캐스트합니다. 모든 하위 컨트롤러에 적용되는 반면 childCtr2는 변경 이벤트를 등록하고 자체적으로 변경됩니다. 브로드캐스트할 때 상위 컨트롤러는 이벤트 이름을 변경해야 합니다.

jsfiddle 링크: http://jsfiddle.net/whitewolf/5JBA7/15/

이 기사가 AngularJS 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.