扩展 UI 选择控制器（角度）答案

【问题标题】：Extend UI select controller (angular)扩展 UI 选择控制器（角度）
【发布时间】：2017-01-12 17:16:04
【问题描述】：

我正在尝试扩展 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;
    }]);
});

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

谢谢。

【问题讨论】：

标签： javascript angularjs inheritance decorator angular-ui-select

【解决方案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;
}]);

【讨论】：