Question

(sorry for my english 🙂

I’m using Select2 in my forms with AngularUI ui-select2 directive like this:

<input ng-model="city" type="text" ui-select2="setupCitySelect" />

where setupCitySelect – object with select2 options. I’m setting him up in appropriate scope

$scope.setupCitySelect = {
    allowClear: true,
    minimumInputLength: 2

    ...etc, about 50 SLOC
}

All works fine. But when we have, let say, five select2 elements on page (or part of page) – CitySelect, UserSelect, ConditionSelect etc. we get a tons of code, most of them is the same. AngularUI provides “Global Defaults”. So we can move repeating code (in directives):

var dirs = angular.module('vipc.directives', ['ui']);

// defaults setting for UI
dirs.value('ui.config', {
    select2: {
        allowClear: true,
        minimumInputLength: 2,
        formatInputTooShort: function(term, minLenght) {
            var rest = minLenght - term.length;
            return "minimum: "+rest;
        },
...etc.

But we still need some work in controllers: to set unique properties, such as ajax-url…
And it’s come on several pages, several controller. Ough…
Yes, I can put this into one file, say common.js. But I think – it’s not best way. Angulas say: “use directive, Luke!”. But how? Too complicated docs. I read docs. Three times.
Without success. I wrote some simple dirs, but this…
It should had ‘isolated’ scope – can be 2 CitySelect on page – in search form and modal form above. compile function? link function?

All i need is just

<myapp-city-select id="city"></myapp-city-select>
<myapp-user-select></myapp-city-select>
...later, same html file
<myapp-city-select id="city2"></myapp-city-select>

Somebody can help?

Answer 1

It should be in the controller. Here is the plunker. showing you that all directives share the same data.

So you can have a directive with common options in the controller and pass specific options into it.

Another option is have a service that defines common options and inject the service into wherever you want.