114

我想对第 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 组件分开扩展呢？

4

5 回答 5

97

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

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

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

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

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

于 2013-06-09T00:51:28.127 回答
60

TL;DR - 给我演示！


     Big Demo Button     
 

使用$provide'sdecorator()来装饰第三方的指令。

在我们的例子中，我们可以像这样扩展指令的范围：

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 版中不起作用。

于 2014-02-22T16:04:30.233 回答
8

虽然这不是您问题的直接答案，但您可能想知道http://angular-ui.github.io/bootstrap/的最新版本（主版本）添加了对禁用选项卡的支持。此功能是通过以下方式添加的： https ://github.com/angular-ui/bootstrap/commit/2b78dd16abd7e09846fa484331b5c35ece6619a2

于 2013-06-09T10:24:53.550 回答
6

另一种解决方案，您可以创建一个新指令来扩展它而不修改原始指令

该解决方案类似于装饰器解决方案：

创建一个新指令并将您希望扩展的指令作为依赖注入

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

这样您就可以在同一个应用程序中使用原始指令和扩展版本

于 2017-03-02T23:50:26.800 回答
1

这是将绑定扩展到具有该bindToController属性的指令的不同方案的另一种解决方案。

注意：这不是此处提供的其他解决方案的替代方案。它仅解决了原始指令设置为bindToController.

于 2016-09-15T13:00:01.160 回答