Angular 지시어 확장

타사 지시문 (특히 Angular UI Bootstrap )을 약간 수정하고 싶습니다 . pane지시문 의 범위에 추가하고 싶습니다 .

angular.module('ui.bootstrap.tabs', [])
.controller('TabsController', ['$scope', '$element', function($scope, $element) {
  // various methods
}])
.directive('tabs', function() {
  return {
    // etc...
  };
})
.directive('pane', ['$parse', function($parse) {
  return {
    require: '^tabs',
    restrict: 'EA',
    transclude: true,
    scope:{
      heading:'@',
      disabled:'@' // <- ADDED SCOPE PROPERTY HERE
    },
    link: function(scope, element, attrs, tabsCtrl) {
      // link function
    },
    templateUrl: 'template/tabs/pane.html',
    replace: true
  };
}]);

그러나 나는 또한 Bower와 함께 Angular-Bootstrap을 최신 상태로 유지하고 싶습니다. 를 실행하자마자 bower update변경 사항을 덮어 씁니다.

그렇다면이 bower 구성 요소와 별도로이 지시문을 확장하려면 어떻게해야합니까?

아마도 이것을 해결하는 가장 간단한 방법은 타사 지시문과 동일한 이름으로 앱에 지시문을 만드는 것입니다. 두 지시문이 모두 실행되며 priority속성을 사용하여 실행 순서를 지정할 수 있습니다 (우선 순위가 높은 것이 먼저 실행 됨).

두 지시문은 범위를 공유하며 지시문의 link메소드 를 통해 타사 지시문의 범위에 액세스하고 수정할 수 있습니다 .

옵션 2 : 또한 동일한 요소에 임의로 명명 된 지시문을 배치하여 타사 지시문의 범위에 액세스 할 수도 있습니다 (두 지시문 모두 격리 범위를 사용하지 않는다고 가정). 요소의 모든 비 격리 범위 지시문은 범위를 공유합니다.

추가 자료 : https://github.com/angular/angular.js/wiki/Dev-Guide%3A-Understanding-Directives

참고 : 이전 답변은 지침이 아닌 타사 서비스를 수정하기위한 것이 었습니다.

TL; DR-gimme tha demo!

     Big Demo Button     
 

사용 $provide의 decorator(), 음, 제 3 자의 지시를 장식합니다.

이 경우 지시문의 범위를 다음과 같이 확장 할 수 있습니다.

app.config(function($provide) {
    $provide.decorator('paneDirective', function($delegate) {
        var directive = $delegate[0];
        angular.extend(directive.scope, {
            disabled:'@'
        });
        return $delegate;
    });
});

먼저, 첫 번째 인수로 pane연결된 이름을 전달 하여 지시문 을 장식하도록 요청한 Directive다음 콜백 매개 변수 (해당 이름과 일치하는 지시문의 배열)에서이를 검색합니다.

일단 우리가 그것을 얻었 으면, 우리는 그 범위 객체를 얻고 필요에 따라 그것을 확장 할 수 있습니다. 이 모든 작업은 config블록 에서 수행되어야합니다 .

일부 메모

• 동일한 이름의 지시문을 추가 한 다음 우선 순위를 설정하는 것이 좋습니다. 의미가없는 것 외에도 ( 단어도 아님 ...) 문제가 발생합니다. 예를 들어 타사 지침의 우선 순위 수준이 변경되면 어떻게됩니까?

• JeetendraChauhan은이 솔루션이 버전 1.13에서 작동하지 않을 것이라고 주장했습니다 (하지만 테스트하지는 않았습니다).

이것이 귀하의 질문에 대한 직접적인 대답은 아니지만 http://angular-ui.github.io/bootstrap/ 의 최신 버전 (마스터)이 탭 비활성화에 대한 지원을 추가 했음을 알고 싶을 수 있습니다 . 이 기능은 https://github.com/angular-ui/bootstrap/commit/2b78dd16abd7e09846fa484331b5c35ece6619a2를 통해 추가되었습니다.

원래 지시문을 수정하지 않고 확장하는 새 지시문을 만드는 또 다른 솔루션

솔루션은 데코레이터 솔루션과 유사합니다.

새 지시문을 만들고 확장하려는 지시문을 종속성으로 삽입하십시오.

app.directive('extendedPane', function (paneDirective) {

  // to inject a directive as a service append "Directive" to the directive name
  // you will receive an array of directive configurations that match this 
  // directive (usually only one) ordered by priority

  var configExtension = {
     scope: {
       disabled: '@'
     }
  }

  return angular.merge({}, paneDirective[0], configExtension)
});

이렇게하면 동일한 앱에서 원래 지시문과 확장 버전을 사용할 수 있습니다.

다음은bindToController 속성 이있는 지시문에 바인딩을 확장하는 다른 시나리오에 대한 또 다른 솔루션 입니다 .

참고 : 이것은 여기에 제공된 다른 솔루션의 대안이 아닙니다. 원래 지침이 bindToController.