UI選択コントローラを拡張する

Question

私はui-select（バージョン0.17.1）を拡張してクリック時に更新しようとしています。私が出発点として使っているこの例（https://jsfiddle.net/betonetotbo/0yfhe7pf/）があります。

これはアプリ全体で発生したいので、私はui-select-choicesディレクティブhtmlをdivボタンを含む自分のものに置き換えました。私はデコレータを追加して、指令コントローラをまだ定義されていない新しいコントローラに置き換えました。

myapp.app.config(function(provide) { 
    $provide.decorator("uiSelectDirective", [ "$delegate", "uiSelectConfig", "$controller"], function ($delegate, uiSelectConfig, $controller) { 
     var directive = $delegate[0]; 
     // This line throws error Unknown provider 
     var $select = $controller('uiSelectCtrl'); 

     return $delegate; 
    }]); 
}); 

私の問題は、コントローラ全体を装飾/拡張して、アプリケーション全体に余分な機能を追加したいということです。私はそれを全部書き直したくないので、私はこのようなコントローラを拡張するための適切な方法を探しています。

ありがとうございました。

Answer 1

私はディレクティブのコンパイル方法をオーバーロードすることで、この問題を解決しました：

$provide.decorator('uiSelectDirective', ['$delegate', function ($delegate) { 
    var directive = $delegate[0]; 
    var compile = directive.compile; 

    directive.compile = function (tElement, tAttrs) { 
     var link = compile.apply(this, arguments); 
     return function (scope, element, attrs, ngModel) { 
      link.apply(this, arguments); 
      var ctrl = ngModel[0]; 
      var activate = ctrl.activate; 

      //I had to close the dropdown when clicking on the directive 
      ctrl.activate = function (initSearchValue, avoidReset) { 
       if (!ctrl.disabled) { 
        if (ctrl.open) { 
         ctrl.close(); 
        } else { 
         activate(initSearchValue, avoidReset); 
        } 
       } 
      } 
     }; 
    }; 

    return $delegate; 
}]);