扩展UI选择控制器(angular)

Extend UI select controller (angular)

本文关键字：angular 控制器 UI 选择 扩展      更新时间：2023-09-26

我试图扩展ui-select(版本0.17.1)，使其刷新点击。这里有一个例子(https://jsfiddle.net/betonetotbo/0yfhe7pf/)，我一直使用它作为起点。

我希望这发生在应用程序范围内，所以我用我自己的，其中包括一个div按钮替换了ui-select-choices指令html。我还添加了一个装饰器，将指令的控制器替换为一个尚未定义的新控制器。

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

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

谢谢。

我已经通过重载指令的编译方法解决了这个问题:

$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;
}]);
相关文章：