Расширить пользовательский интерфейс выбора (угловой)

Question

Я пытаюсь расширить ui-select (версия 0.17.1), чтобы он обновлялся при нажатии. Здесь приведен пример (https://jsfiddle.net/betonetotbo/0yfhe7pf/), который я использовал в качестве отправной точки.

Я хочу, чтобы это произошло в приложении, поэтому я заменил директиву ui-select-choice директивы 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; 
}]);