Angular directive error unexpected string

Question

I am trying to create an angular directive that will initialise the select2, this directive will be used in select tag as below

<select ng-model="add.doctype" class="form-control select2" select2 append-to-body ng-options="x.tipe for x in ::Types">
    <option value=""></option>
</select>

And the directive is

(function() {
    'use strict';

    angular.module('myapp.theme')
        .directive('select2', select2);

    function select2() {
        return {
            $(".select2").select2({ theme: "bootstrap" });
        };
    }

})();

it gave an error in console Unexpected string pointed to $(".select2").select2({ theme: "bootstrap" });, did i miss something there?

return { ... } indicates you are returning an object but it has no keys. Try `return { link: function(scope, element) { jQuery(element[0]).select2({theme: 'bootstrap'}) } } — Phil
– Phil, Commented Jun 15, 2016 at 6:43

Walfrat · Accepted Answer · 2016-06-15 07:02:45Z

2

As pointed out eschie, you should use the link function to have your code working.

However as eschie did there is no point using a directive/ Because this JQuery code will select all element with the class 'select2' for each time angular will find it since the directive wil get executed each time angular will find the select2 class.

You should do it like this :

angular.module('myapp.theme').directive('select2', select2)
function select2() {
    return{
        restrict: 'A',
        link: function(scope, element, attr){
            $(element).select2({ theme: "bootstrap" });
        }
    }
}

Note that i restrict on attribute. I noticed you have select2 in your select tag as a class and as an attribute. In angular way it is better to use an attribute as a directive. If you want to keep the class one use restrict:'C' in the directive.

answered Jun 15, 2016 at 7:02

Walfrat

5,3941 gold badge18 silver badges36 bronze badges

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

4 Comments

Joseph Over a year ago

it give an error $(...).select2 is not a function

Walfrat Over a year ago

@JosephGoh Did you include the select2 library in your index.html file ?

Joseph Over a year ago

i am using bower and it supposes to add the library automatically right. but thank for the time and effort guys, really appreciated. I have found angular-ui-select which does the job. again thank you all.

Walfrat Over a year ago

@JosephGoh you should say this as an answer or at least an edit so people will know that for you the problem is gone.

eschie · Accepted Answer · 2016-06-15 06:48:42Z

1

1) Check to make sure jQuery is included in our project.

2) Initialize the directive to be used as class selector. From Angular's directive documentation:

Note: When you create a directive, it is restricted to attribute and elements only by default. In order to create directives that are triggered by class name, you need to use the restrict option.

3) Put your logic in the directive's link function:

angular.module('myapp.theme')
.directive('select2', select2)

function select2() {
    return{
        restrict: 'C',
        link: function(){
            $(".select2").select2({ theme: "bootstrap" });
        }
    }
}

answered Jun 15, 2016 at 6:48

eschie

3035 silver badges14 bronze badges

4 Comments

Phil Over a year ago

OP appears to be using the attribute select2 as well as the class

eschie Over a year ago

Additionally, you should probably pass in the element to the link function if you have more than 1 ".select2" element

Joseph Over a year ago

modified the directive, and change the directive name to select21, it is not give any error nor it initialize the select tag.

eschie Over a year ago

change restrict to 'CA' to initialize directive on both class and attribute. also, make sure the name of the directive, class, and/or attribute tag all match up.

Collectives™ on Stack Overflow

Angular directive error unexpected string

2 Answers 2

4 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related