중첩 지시문 간의 통신

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

<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) {
  }
}

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

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

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

&지시문의 scope: {}정의를 API로 볼 때 주로 지시문 범위에서 속성 을 정의하는 것이 좋습니다. $emit주입 된 컨트롤러 내에서 사용되는 'd 이벤트, 상속 된 범위 함수 또는 함수에 대한 링크 및 컨트롤러 기능을 검색하는 것보다 지시문이 올바르게 작동해야하는 정보를 확인하기 위해 범위 속성 정의를 보는 것이 훨씬 쉽습니다 .

내 의견 :

서비스는 모듈 / 지시문 / 컨트롤러간에 동작 / 데이터를 공유하는 기본 방법입니다. 지시문은 중첩 될 수있는 분리 된 것입니다. 컨트롤러는 가능한 한 뷰 모델이되어야하며 이상적으로는 비즈니스 로직이 없어야합니다.

그래서:

부모 범위 기능에 액세스하여 함께 배선을 시작하면 너무 강하게 결합하여 전체 응용 프로그램을 읽을 수 없으며 구성 요소를 재사용 할 수 없게 될 위험이 있다고 생각합니다. 서비스에서 공유 데이터 또는 동작을 분리 할 때 런타임에 사용될 서비스를 결정하더라도 다른 데이터 / 동작으로 전체 지시문을 재사용 할 수 있다는 이점이 있습니다. 의존성 주입이 가장 중요합니다.