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

Question

I'm using xeditable and ui.select. I need to configure select with search for working with xeditable. So, I created directive:

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

This not work, because $select not found. $select is uiSelectCtrl controller, that using in uiSelect directive.

It seems, I need to inject ui.select into my directive, but I have no idea, how to do this and keep current xeditable instance.

Question: how can I inject ui.select or only $select controller into my directive?

If details I provided not enough, please, let me know.

Solved. I changed my directive code according to @jusopi answer and wrapped $select and $parent.data into quotes and all became working:

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

This makes the assumption that your problem is because you're not properly injecting module dependencies (as pointed out by @uday).

To my knowledge you don't/can't add additional modular dependencies to an existing module. The following would overwrite the xeditable module defined by your external lib because this syntax defines a module (as opposed to getting a module to define additional injectable constructs).

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

Instead you need to define your directive in your own module, making sure to reference your xeditable and ui.select modules like so:

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