2014-06-28 51 views
3

擴展第三方庫我使用的角度引導用戶界面第三方庫作爲我的角內部應用程序的依賴性。我只是想知道在這個庫中的指令和控制器中添加功能的最佳方式是什麼?最好的方法 - 在角度

我知道我可以編輯ui-bootstrap-tpls-0.11.0.js中的指令/控制器,但是如果我要重新構建生成服務器上的依賴項,它會清除我的更改。如果我要更新庫版本,它也會清除我的更改。我正在尋找一種乾淨的方式來擴展功能。

例如,如果我要像做延長日期選擇器指令接受customMethod或的CustomData隨後的連接功能中使用這些。做這個的最好方式是什麼?

<datepicker ng-model="dt" custom-method="myCustomMethod()" 
    custom-attribute="myCustomAttribute" min-date="minDate" 
    show-weeks="true" class="well well-sm"></datepicker> 

在此先感謝。

+0

[擴展角指令]的可能重複(http://stackoverflow.com/questions/17005122/extending-angular-directive) –

+0

感謝帕特里克,我曾經嘗試過兩個指令與同名,但無法實現向範圍添加自定義方法或屬性。儘管我能夠擴展鏈接功能。 – link

+0

還有其他答案,其中一個與此處提供的答案相同,因此我將其標記爲重複。 –

回答

4

一種選擇是裝飾指令。裝飾看起來像:

angular.module('app', ['ui.bootstrap']). 
    config(function($provide){ 
     // Inject provide into the config of your app 
     $provide.decorator('datepickerDirective', function($delegate){ 

      // the directive is the first element of $delegate 
      var datepicker = $delegate[0]; 

      // Add whatever you want to the scope: 
      angular.extend(datepicker.scope, { 
       customAttribute: '@', 
       customMethod: '@' 
      }); 

      // Might want to grab a reference to the old link incase 
      // you want to use the default behavior. 
      var oldLink = datepicker.link; 

      datepicker.link = function(scope, element, attrs){ 
       // here you can write your new link function 
       oldLink(scope, element, attrs); 
      }; 

      return $delegate; 
     }); 
    }); 
+0

感謝這是我一直在尋找,它爲我工作。 – link