扩展角度指令

Question

我想对第3方指令（特别是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组件分开扩展该指令？

Answer 1

解决此问题的最简单方法可能是在您的应用上创建与第三方指令同名的指令。这两个指令都将运行，并且您可以使用priority属性指定运行顺序（优先级更高的优先运行）。

这两个伪指令将共享作用域，您可以通过伪指令的link方法访问和修改第三方伪指令的作用域。

选项2： 您也可以通过简单地将自己任意命名的指令放在与它相同的元素上来访问第三方指令的作用域（假设这两个指令都不使用隔离作用域）。
元素上的所有非隔离作用域指令都将共享作用域。

进一步阅读： https :
//github.com/angular/angular.js/wiki/Dev-Guide%3A-Understanding-
Directives

注意： 我以前的答案是修改第三方服务，而不是指令。