AngularJs 명령어 확장

AngularJs 명령어 확장

서드파티 지시문(특히 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
  };
}]);

하지만 Angular-Bootstrap도 Bower에 대해 최신 상태로 유지하고 싶습니다.뛰자마자bower update변경 내용을 덮어씁니다.

그러면 이 명령어를 이 바우어 컴포넌트와 별도로 확장하려면 어떻게 해야 할까요?

이 문제를 해결하는 가장 간단한 방법은 타사 지침과 동일한 이름으로 앱에 지침을 생성하는 것입니다.두 디렉티브가 모두 실행되며 실행 순서를 지정할 수 있습니다.priorityproperty(최초 priority가 실행됨)

두 디렉티브는 범위를 공유하며 디렉티브를 통해 서드파티 디렉티브의 범위에 액세스하여 수정할 수 있습니다.link방법.

옵션 2: 서드파티 디렉티브의 범위에는, 임의의 이름의 디렉티브를 같은 요소에 배치하는 것만으로 액세스 할 수 있습니다(어느 디렉티브도 범위를 분리하는 것을 전제로 하고 있습니다).요소의 모든 비분리 범위 지시어는 범위를 공유합니다.

상세 정보: https://github.com/angular/angular.js/wiki/Dev-Guide%3A-Understanding-Directives

주의: 이전 답변은 지시사항이 아닌 서드파티 서비스 수정에 대한 답변이었습니다.

TL;DR - 데모를 보여주세요!

     Big Demo Button     
 

---

사용하다$provide제3자의 지시사항을 장식해야 합니다.

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

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

일단 저희가 준비한 장식을pane그 이름을 전달함으로써 지시문을 작성한다.Directive첫 번째 인수로 콜백파라미터(이러한 이름과 일치하는 디렉티브 배열)에서 취득합니다.

취득하면 스코프 오브젝트를 취득하여 필요에 따라 확장할 수 있습니다.이 모든 것은, 다음의 URL 로 실시할 필요가 있습니다.config차단합니다.

메모가 몇 가지

• 같은 이름의 디렉티브를 추가한 후 priority 레벨을 설정하는 것이 권장되고 있습니다.(단어조차 아닌) 의미 없는 것은 물론, 예를 들어 제3자 지침의 우선순위 수준이 변경되면 어떻게 됩니까?

• Jeetendra Chauhan은 (아직 테스트하지 않았지만) 이 솔루션이 버전 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.

언급URL : https://stackoverflow.com/questions/17005122/extending-angularjs-directive