javascript - 扩展 AngularJs 指令

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
  };
}]);

但我也想让 Angular-Bootstrap 与 Bower 保持同步。只要我运行 bower update，我就会覆盖我的更改。

那么我该如何着手从这个 bower 组件中单独扩展这个指令呢？

Answer 1

解决此问题的最简单方法可能是在您的应用中创建一个与第三方指令同名的指令。两个指令都将运行，您可以使用 priority 属性指定它们的运行顺序(优先级高的先运行)。

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

选项 2:您还可以访问第三方指令的范围，只需将您自己任意命名的指令放在与它相同的元素上(假设两个指令都没有使用隔离范围)。 元素上的所有非隔离范围指令将共享范围。

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

注意:我之前的回答是修改第三方服务，不是指令。