Angular。如何将 ui.select 注入到使用 xeditable 的指令中？

Question

我正在使用 xeditable 和 ui.select。我需要配置 select 搜索以使用 xeditable。所以，我创建了指令：

var xeditable = angular.module('xeditable');

xeditable.directive('editableUiSelect', ['editableDirectiveFactory', 'editableNgOptionsParser',
        function(editableDirectiveFactory, editableNgOptionsParser) {
            return editableDirectiveFactory({
                directiveName: 'editableUiSelect',
                inputTpl: '<span></span>',
                render: function() {
                    this.parent.render.call(this);
                    var parsed = editableNgOptionsParser(this.attrs.eNgOptions);
                    var filter = " | filter: $select.search";
                    var html = "<ui-select ng-model='"+parsed.ngModel+"'>"+ 
                        "<ui-select-match>"+ "<span ng-bind='"+$select.selected.name+"'></span></ui-select-match>"+
                        "<ui-select-choices repeat='"+parsed.ngRepeat+filter+"'>"+"<span ng-bind='"+parsed.locals.displayFn+"'></span>"+
                        "</ui-select-choices></ui-select>";

                    this.inputEl.removeAttr('ng-model');
                    this.inputEl.removeAttr('ng-options');
                    this.inputEl.html(html);
                },
                autosubmit: function() {
                    // do smth
                }
            });
        }]);

这不起作用，因为找不到 $select。 $select 是 uiSelectCtrl 控制器，在 uiSelect 指令中使用。

看来，我需要将 ui.select 注入到我的指令中，但我不知道如何做到这一点并保持当前的可编辑实例。

问题：如何将 ui.select 或仅 $select 控制器注入我的指令？

如果我提供的细节不够，请告诉我。

已解决。 我根据@jusopi 的回答更改了我的指令代码，并将 $select 和 $parent.data 括在引号中，一切都开始工作了：

var Dashboard = angular.module('Dashboard');

Dashboard.directive('editableUiSelect', ['editableDirectiveFactory', 'editableNgOptionsParser',
        function(editableDirectiveFactory, editableNgOptionsParser) {
            return editableDirectiveFactory({
                directiveName: 'editableUiSelect',
                inputTpl: '<span></span>',
                render: function() {
                    this.parent.render.call(this);
                    var parsed = editableNgOptionsParser(this.attrs.eNgOptions);
                    var filter = " | filter: $select.search";
                    var html = "<ui-select ng-model='$parent.data'>"+ 
                        "<ui-select-match>"+ "<span ng-bind='$select.selected.name'></span></ui-select-match>"+
                        "<ui-select-choices repeat='"+parsed.ngRepeat+filter+"'>"+"<span ng-bind='"+parsed.locals.displayFn+"'></span>"+
                        "</ui-select-choices></ui-select>";

                    this.inputEl.removeAttr('ng-model');
                    this.inputEl.removeAttr('ng-options');
                    this.inputEl.html(html);
                },
                autosubmit: function() {
                    // do smth
                }
            });
        }]);

Answer 1

你可以这样依赖注入吗 var xeditable = angular.module('xeditable',['ui.select']);

现在 ui.select 将在 xeditable 中可用。

Answer 2

这假设您的问题是因为您没有正确注入模块依赖项（正如@uday 所指出的）。

据我所知，您t/can不会向现有模块添加额外的模块依赖项。以下将覆盖外部库定义的 xeditable 模块，因为此语法定义一个模块（而不是让一个模块定义额外的可注入结构）。

angular.module( <name>, <other-modules-array> )

相反，您需要在自己的模块中定义指令，确保像这样引用 xeditable 和 ui.select 模块：

angular.module( 'myApp', [ 'xeditable', 'ui.select' ])
.directive( 'editableUiSelect', [ 
    'editableDirectiveFactory', 
    'editableNgOptionsParser',
    function( editableDirectiveFactory, editableNgOptionsParser ) { 
        ...
    }
])

Angular。如何将 ui.select 注入到使用 xeditable 的指令中？

Angular. How to inject ui.select into directive, that using xeditable?

javascript

angularjs

x-editable

ui-select