扩展 AngularJs 指令 [英] Extending AngularJs Directive

问题描述

我想对第 3 方指令(特别是 Angular UI Bootstrap).我只想添加到 pane 指令的范围:

I'd like to make a minor modification to a 3rd party directive (specifically Angular UI Bootstrap). I simply want to add to the scope of the pane directive:

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，我就会覆盖我的更改.

But I also want to keep Angular-Bootstrap up to date with Bower. As soon as I run bower update, I'll overwrite my changes.

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

So how do I go about extending this directive separately from this bower component?

推荐答案

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

Probably the simplest way to solve this is to create a directive on your app with the same name as the third party directive. Both directives will run and you can specify their run order using the priority property (higher priority runs first).

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

The two directives will share scope and you can access and modify the scope of the third party directive via your directive's link method.

选项 2:您还可以通过简单地将您自己的任意命名的指令放在与它相同的元素上来访问第三方指令的范围(假设两个指令都使用隔离范围).元素上的所有非隔离作用域指令都将共享作用域.

Option 2: You can also access a third party directive's scope by simply putting your own arbitrarily named directive on the same element with it (assuming neither directive uses isolate scope). All non-isolate scope directives on an element will share scope.

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

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

Note: My previous answer was for modifying a third party service, not a directive.

这篇关于扩展 AngularJs 指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！