javascript - 扩展 UI 选择 Controller ( Angular )

Question

我正在尝试扩展 ui-select(版本 0.17.1)以使其在点击时刷新。这里有一个示例 ( https://jsfiddle.net/betonetotbo/0yfhe7pf/)，我一直将其用作起点。

我希望在整个应用程序范围内发生这种情况，因此我将 ui-select-choices 指令 html 替换为我自己的指令 html，其中包含一个 div 按钮。我还添加了一个装饰器，用一个尚未定义的新 Controller 替换指令 Controller 。

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

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

谢谢。

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