AngularJS 컨트롤러 간의 통신 방법에 대한 자세한 설명

이 기사의 예에서는 AngularJS 컨트롤러 간의 통신 방법을 설명합니다. 참고하실 수 있도록 자세한 내용은 다음과 같습니다.

1. 범위 상속 사용

범위 상속은 js의 프로토타입 상속 방법을 기반으로 하기 때문에 여기서는 두 가지 상황이 있습니다. , 범위의 값이 기본 유형인 경우 상위 범위의 값을 수정하면 하위 범위에 영향을 미칩니다. 반대로 하위 범위를 수정하면 하위 범위의 값에만 영향을 미치고 하위 범위의 값에는 영향을 미치지 않습니다. 상위 범위 값; 값을 공유하기 위해 상위 범위와 하위 범위가 필요한 경우 후자를 사용해야 합니다. 즉, 범위의 값은 개체이며 양쪽의 수정 사항이 다른 쪽에도 영향을 미칠 수 있습니다. 이는 js All의 객체가 참조 유형이기 때문입니다.

기본형

function Sandcrawler($scope) {
  $scope.location = "Mos Eisley North";
  $scope.move = function(newLocation) {
    $scope.location = newLocation;
  }
}
function Droid($scope) {
  $scope.sell = function(newLocation) {
    $scope.location = newLocation;
  }
}

html:

<p ng-controller="Sandcrawler">
  <p>Location: {{location}}</p>
  <button ng-click="move(&#39;Mos Eisley South&#39;)">Move</button>
  <p ng-controller="Droid">
    <p>Location: {{location}}</p>
    <button ng-click="sell(&#39;Owen Farm&#39;)">Sell</button>
  </p>
</p>

객체

function Sandcrawler($scope) {
  $scope.obj = {location:"Mos Eisley North"};
}
function Droid($scope) {
  $scope.summon = function(newLocation) {
    $scope.obj.location = newLocation;
  }
}

html:

<p ng-controller="Sandcrawler">
  <p>Sandcrawler Location: {{location}}</p>
  <p ng-controller="Droid">
    <button ng-click="summon(&#39;Owen Farm&#39;)">
      Summon Sandcrawler
    </button>
  </p>
</p>

2. 이벤트 기반 접근

일반적으로 대부분의 경우 상속 기반 접근 방식으로 충분하지만 이 접근 방식은 형제 컨트롤러 간의 통신을 구현하지 않으므로 이벤트의 길로 이어집니다. 이벤트 기반 접근 방식에서는 $on, $emit 및 $boardcast 방식으로 구현할 수 있습니다. $on은 이벤트 모니터링을 나타내고, $emit는 상위 범위에 대한 이벤트 트리거를 나타내고, $boardcast는 보고를 나타냅니다. 하위 수준 아래의 범위에 이벤트를 브로드캐스트합니다. 다음 코드를 참조하세요.

위쪽으로 이벤트 전파

function Sandcrawler($scope) {
  $scope.location = "Mos Eisley North";
  $scope.$on('summon', function(e, newLocation) {
    $scope.location = newLocation;
  });
}
function Droid($scope) {
  $scope.location = "Owen Farm";
  $scope.summon = function() {
    $scope.$emit('summon', $scope.location);
  }
}

html:

<p ng-controller="Sandcrawler">
  <p>Sandcrawler Location: {{location}}</p>
  <p ng-controller="Droid">
    <p>Droid Location: {{location}}</p>
    <button ng-click="summon()">Summon Sandcrawler</button>
  </p>
</p>

방송 이벤트 다운

function Sandcrawler($scope) {
  $scope.location = "Mos Eisley North";
  $scope.recall = function() {
    $scope.$broadcast('recall', $scope.location);
  }
}
function Droid($scope) {
  $scope.location = "Owen Farm";
  $scope.$on('recall', function(e, newLocation) {
    $scope.location = newLocation;
  });
}

🎜>

이 사용법에서 형제 컨트롤 간의 통신 방법을 도출합니다. 먼저 형제 컨트롤의 부모 범위에 대한 이벤트를 트리거합니다. 그런 다음 부모 범위에서 이벤트를 수신하고 이 방법으로 전달되는 매개 변수를 통해 자식 범위에 이를 브로드캐스트합니다. 이벤트가 발생하면 데이터는 상위 범위와 형제 범위 간에 전파될 수 있습니다. 여기서 주목해야 할 점은 이벤트가 중개자로서 상위 요소를 통해 전달되는 경우 형제 요소에서 사용하는 이벤트 이름이 동일할 수 없으며 그렇지 않으면 무한 루프에 진입한다는 것입니다. 코드를 살펴보십시오.

<p ng-controller="Sandcrawler">
  <p>Sandcrawler Location: {{location}}</p>
  <button ng-click="recall()">Recall Droids</button>
  <p ng-controller="Droid">
    <p>Droid Location: {{location}}</p>
  </p>
</p>

형제 범위 간 전파

html:

function Sandcrawler($scope) {
  $scope.$on('requestDroidRecall', function(e) {
    $scope.$broadcast('executeDroidRecall');
  });
}
function Droid($scope) {
  $scope.location = "Owen Farm";
  $scope.recallAllDroids = function() {
    $scope.$emit('requestDroidRecall');
  }
  $scope.$on('executeDroidRecall', function() {
    $scope.location = "Sandcrawler"
  });
}

3.Angular 서비스 방식

<p ng-controller="Sandcrawler">
  <p ng-controller="Droid">
    <h2>R2-D2</h2>
    <p>Droid Location: {{location}}</p>
    <button ng-click="recallAddDroids()">Recall All Droids</button>
  </p>
  <p ng-controller="Droid">
    <h2>C-3PO</h2>
    <p>Droid Location: {{status}}</p>
    <button ng-click="recallAddDroids()">Recall All Droids</button>
  </p>
</p>

ng에서는 서비스가 싱글톤이므로 서비스 내에서 객체가 생성되고, 사용할 수 있습니다. 종속성 주입 방법은 모든 컨트롤러에서 공유됩니다. 다음 예를 참조하면 서비스 객체의 값이 한 컨트롤러에서 수정되고 수정된 값이 다른 컨트롤러에서 얻어집니다.

html:

var app = angular.module('myApp', []);
app.factory('instance', function(){
  return {};
});
app.controller('MainCtrl', function($scope, instance) {
 $scope.change = function() {
    instance.name = $scope.test;
 };
});
app.controller('sideCtrl', function($scope, instance) {
  $scope.add = function() {
    $scope.name = instance.name;
  };
});

위는 AngularJS 컨트롤러 간의 통신 방법에 대한 자세한 설명입니다. PHP 중국어 넷(www.php.cn)!

<p ng-controller="MainCtrl">
   <input type="text" ng-model="test" />
   <p ng-click="change()">click me</p>
</p>
<p ng-controller="sideCtrl">
  <p ng-click="add()">my name {{name}}</p>
</p>