我想对第3方指令(特别是Angular UI Bootstrap)进行较小的修改。我只是想添加pane指令的范围:
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 }; }]);
但是我也想让Bower与Angular-Bootstrap保持同步。运行后bower update,我将覆盖所做的更改。
bower update
那么,如何与该Bower组件分开扩展该指令?
解决此问题的最简单方法可能是在您的应用上创建与第三方指令同名的指令。这两个指令都将运行,您可以使用priority属性指定运行顺序(优先级更高的优先运行)。
priority
这两个指令将共享作用域,您可以通过指令的link方法访问和修改第三方指令的作用域。
link
选项2: 您也可以通过简单地将自己任意命名的指令放在与它相同的元素上来访问第三方指令的作用域(假设这两个指令都不使用隔离作用域)。元素上的所有非隔离作用域指令都将共享作用域。
注意: 我以前的答案是修改第三方服务,而不是指令。