扩展 AngularJ 指令

我想对第三方指令(特别是 角形用户界面引导程序)做一个小小的修改。我只是想增加 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 组件分开来进行扩展呢？

51140 次浏览
小开
最佳答案

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

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.

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.

延伸阅读: < a href = “ https://github.com/angle/angular.js/wiki/Dev-Guide% 3A-understand-Directions”rel = “ nofollow noReferrer”> https://github.com/angular/angular.js/wiki/dev-guide%3a-understanding-directives

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

小开

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

小开

给我演示一下！


     Big Demo Button     
 

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

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

app.config(function($provide) {
$provide.decorator('paneDirective', function($delegate) {
var directive = $delegate[0];
angular.extend(directive.scope, {
disabled:'@'
});
return $delegate;
});
});

首先，我们请求通过传递 pane指令的名称来装饰它，并将其与 Directive连接起来作为第一个参数，然后我们从 callback 参数(这是一个与该名称匹配的指令数组)检索它。

Once we got it, we can obtain its scope object and extend it as needed. Notice that all of this has to be done in the config block.

一些笔记

  • 有人建议简单地添加一个具有相同名称的指令，然后设置其优先级别。除了没有语义(我知道是 一个字都没说)之外，它还带来了一些问题，例如，如果第三方指令的优先级级别发生了变化怎么办？

  • JeetendraChauhan has claimed (I haven't tested it though) that this solution will not work in version 1.13.

小开

Here is another solution for a different scenario of extending bindings to a directive that has the bindToController property.

注意: 这不是这里提供的其他解决方案的替代方案。它只解决了一个特定的情况(在其他答案中没有涉及) ，其中原始指令是用 bindToController设置的。

小开

另一个解决方案是创建一个新指令来扩展它，而不需要修改原始指令

解决方案与装饰器解决方案类似:

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

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

通过这种方式，您可以在同一个应用程序中使用原始指令和扩展版本


提交答案