扩展AngularJs指令 [英] Extending AngularJs Directive

问题描述

我想对第三方指令(特别是 Angular UI Bootstrap 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
  };
}]);

但是我也想和Bower保持Angular-Bootstrap的最新状态.一旦运行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屋！