지시문 사이에 의사 소통하는 방법은 상당히 많습니다. 내부 지시문이 중첩 된 지시문이 있다고 가정하면 내부 지시문이 외부와 통신해야합니다 (예 : 사용자가 선택).

<outer>
  <inner></inner>
  <inner></inner>
</outer>

지금 까지이 작업을 수행하는 5 가지 방법이 있습니다

require: 부모 지시

inner지시어는 요구할 수 outer는 컨트롤러에 대한 몇 가지 방법을 노출시킬 수 지시어. 그래서 inner정의에서

require: '^outer',
link: function(scope, iElement, iAttrs, outerController) {
   // This can be passed to ng-click in the template
   $scope.chosen = function() {
     outerController.chosen(something);
   }
}

그리고 outer지시문의 컨트롤러에서 :

controller: function($scope) {
   this.chosen = function(something) {
   }
}

$emit 행사

inner지시 할 수 $emit이벤트, outer지시어를 통해 응답 할 수는 $on. 에 따라서 inner지침의 컨트롤러 :

controller: function($scope) {
  $scope.chosen = function() {
    $scope.$emit('inner::chosen', something);
  }
}

과에서 outer지침 컨트롤러 :

controller: function($scope) {
  $scope.$on('inner::chosen, function(e, data) {
  }
}

다음을 통해 상위 범위에서 표현식을 실행합니다. &

항목은 부모 범위의 식에 바인딩하여 적절한 시점에서 실행할 수 있습니다. HTML은 다음과 같습니다.

<outer>
  <inner inner-choose="functionOnOuter(item)"></inner>
  <inner inner-choose="functionOnOuter(item)"></inner>
</outer>

따라서 inner컨트롤러에는 ‘innerChoose’함수가 있으며

scope: {
  'innerChoose': '&'
},
controller: function() {
  $scope.click = function() {
    $scope.innerChoose({item:something});
  }
}

outer지시문 범위 에서 ‘functionOnOuter’함수를 호출합니다 (이 경우) .

controller: function($scope) {
  $scope.functionOnOuter = function(item) {
  }
}

격리되지 않은 범위에서 범위 상속

이들은 중첩 컨트롤러이기 때문에 범위 상속이 작동 할 수 있으며 내부 지시문은 격리 된 범위가없는 한 범위 체인의 모든 함수를 호출 할 수 있습니다. 에 따라서 inner지침 :

// scope: anything but a hash {}
controller: function() {
  $scope.click = function() {
    $scope.functionOnOuter(something);
  }
}

그리고 outer지시문에서 :

controller: function($scope) {
  $scope.functionOnOuter = function(item) {
  }
}

내부 및 외부에 주입 된 서비스

서비스는 두 지시문 모두에 삽입 될 수 있으므로 동일한 객체에 직접 액세스하거나 서비스를 알리기 위해 함수를 호출하고 펍 / 서브 시스템에서 알림을 받도록 등록 할 수도 있습니다. 지시문을 중첩 할 필요가 없습니다.

질문 : 서로의 잠재적 인 단점과 장점은 무엇입니까?

답변