Angular UI select2 with tags not working inside custom directive

Question

Using the Angular UI Select2 directive, with tags defined on an input field. If the input is itself inside a custom directive, then it is not initialised correctly and the console gives an error:

query function not defined for Select2 tagging

I suspect this might be to do with the order in which the directives are compiled / linked vs when the select 2 function is called.

Maybe there is a simple workaround, perhaps using the compile function or a directive controller instead of a link function? Or maybe it is an issue with the Angular UI select2 directive.

I have made a plunker that displays the problem:

http://plnkr.co/edit/myE5wZ

So my question is - How do you get get select2 tags working from inside a custom Angular directive?

Found a workaround: If you define the variables on the controller scope, and then pass them into the directive it works. plnkr.co/edit/oHAWrK . So I think this is to do with when things are available on the scope, the link function is clearly not the right the place to do this. I would ideally still like a solution where I could encapsulate the select2 options inside the scope, instead of having to define everything in the parent controller if anyone knows how to do this? — David Bochenski
– David Bochenski, Commented Mar 26, 2013 at 10:41

David Bochenski · Accepted Answer · 2013-03-28 13:10:32Z

5

In the end I managed to find a solution I was happy with involving nesting two directives, that way the logic can be encapsulated inside the parent directive (not spilling out into the controller).

A Plunker of my solution is here for anyone who may stumble across the same issue:

http://plnkr.co/edit/ZxAPF5BzkgPtn9xddCRM

answered Mar 28, 2013 at 13:10

David Bochenski

3094 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jaredwilli Over a year ago

This is great. It's the one solution I've found that has gotten me as close to what I need to do working but I'm still stuck. I'm trying to pre-select the objects that are output in the console, but the query function isn't getting called plnkr.co/edit/0UVGid?p=preview. Any idea why?

ProLoser · Accepted Answer · 2013-06-15 09:31:40Z

4

I just encountered this today and summarily realized the fix:

PostLinking functions are executed in reverse order (deepest grandchild to greatest grandparent).

Put your custom modal's code (or anything that sets $scope data for use in its children) inside a PreLinking function. PreLinking functions go from parent to child, and all PreLinking functions are performed before the PostLinking functions.

answered Jun 15, 2013 at 9:31

ProLoser

4,6152 gold badges18 silver badges23 bronze badges

1 Comment

Sebastian Over a year ago

Hint for beginners: You need to define the compile-function of the definition object like in

compile: function(element, attributes){          return {              pre: function(scope, element, attributes, controller, transcludeFn){  scope.select2Option = { query: function(options){}              },              post: function(scope, element, attributes, controller, transcludeFn){                }          }      },

testing123 · Accepted Answer · 2013-05-18 17:16:34Z

0

I had a similar issue. Your solution works but IMHO I think an even better solution is to use the controller function instead of the link function inside the directive. Doing this you do need nested directives.

answered May 18, 2013 at 17:16

testing123

11.5k10 gold badges50 silver badges66 bronze badges

1 Comment

David Bochenski Over a year ago

I ended up writing my own directive and leaving angular ui to its own devices. I'd be interested to see the controller function implementation if you have time to create a plnkr.

Andy · Accepted Answer · 2014-08-18 09:06:02Z

0

By using the controller function instead of the link function in the directive it's working. Example:

function myFunction() { 
  var dir = {};
  dir.scope = { myModel: '=' };
  dir.restrict = 'E';
  dir.templateUrl = 'myTemplate.html';
  dir.replace = true;
  dir.controller = function ($scope) {
    $scope.myVar = ...;
  };

  return dir;
};

answered Aug 18, 2014 at 9:06

Andy

755 bronze badges

Comments

Satabol · Accepted Answer · 2014-10-11 19:38:40Z

0

I have this error too. My short solution:

<input type="hidden" 
       name="citizenship" 
       class="form-control input-sm col-sm-10" 
       style="width:500px" 
       multiple 
       ui-select2="params.options.citizenshipOptions"   
       ng-model="cvLang.content.citizenship"
       ng-repeat="a in [1]"
 />

ng-repeat="a in [1]" is a magical thing!!! It is not clear for me a logic of a context, but this is working. May be this can help?

answered Oct 11, 2014 at 19:38

Satabol

982 silver badges7 bronze badges

Collectives™ on Stack Overflow

Angular UI select2 with tags not working inside custom directive

5 Answers 5

1 Comment

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related