扩展 UI select 控制器 (angular)

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

我的问题是我还想 decorate/extend 控制器在整个应用程序中添加额外的功能。我不想完整地重写它，所以我正在寻找扩展这样的控制器的正确方法。

谢谢。

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

扩展 UI select 控制器 (angular)

Extend UI select controller (angular)

javascript

inheritance

decorator

angularjs

angular-ui-select