CODEWITHSUNDEEP
javascriptangularjsangular-directiveng-tags-input
sameera207
sameera207

Reputation: 16629

ngTagInput is giving a javascript console error when calling through a directive

I'm trying to implement [ngTagsInput][1] in my angularjs project. Following is my setup:

#js file
$scope.loadTags = function(query) {
        $scope.tags = [
            { text: 'just' },
            { text: 'some' },
            { text: 'cool' },
            { text: 'tags' }
          ]
        //return $http.get('/tags?query=' + query);
 }

and in my view (myview.html.haml)

  %tags-input{"ng-model" => "tags"}
    %auto-complete{:source => "loadTags($query)"}

which is same as:

   <tags-input ng-model="tags">
        <auto-complete source="loadTags($query)"></auto-complete>
      </tags-input>

The above code I copied from the ngTagInput plugin website itself. and I'm using CDN to load the same versions as in the plugin website. But when I type tags I'm getting the following error in my JavaScript console:

TypeError: Cannot read property 'then' of undefined
    at http://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/2.0.1/ng-tags-input.min.js:1:5150
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.js:13777:28
    at completeOutstandingRequest (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.js:4236:10)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.js:4537:7

It looks like something to do with promises. (I'm pretty new to Angular.js and I'm just guessing), but I wonder how it works in the example given in the website.

But if I load the tags with the page load, it works fine. What could be going wrong here?

Edit

After @Pierre comments, my new code looks like this

I probably have forgot the most important part, I'm calling this tags autocomplete method (in controller) from a directive.

recipeform.tags is my model

#haml form
 %tags-input{"ng-model" => "recipeform.tags"}
    %auto-complete{:source => "loadTags($query)"}

#js
$scope.loadTags = function(query) {
        var defer = $q.defer();
        defer.resolve([
            { text: 'just' },
            { text: 'some' },
            { text: 'cool' },
            { text: 'tags' }
            ]);
        return defer.promise;
        /*return [*/
            //{ text: 'just' },
            //{ text: 'some' },
            //{ text: 'cool' },
            //{ text: 'tags' }
        /*]*/
      }

Both the js codes give the same error as previous.

Upvotes: 1

Views: 1441

Answers (1)

Pierre Gayvallet
Pierre Gayvallet

Reputation: 2953

 <auto-complete source="loadTags($query)"></auto-complete>

The "source" is a method supposed to return a promise, which will be used to return the tags. Not to inject them into your model...

$scope.loadTags = function(query) {
       return[
            { text: 'just' },
            { text: 'some' },
            { text: 'cool' },
            { text: 'tags' }
          ]
 }

should work. If not, it means the directive need a REAL promise, then you will need to do (but I dont think you will need to go this far) :

$scope.loadTags = function(query) {
     var defer = $q.defer();
     defer.resolve([
            { text: 'just' },
            { text: 'some' },
            { text: 'cool' },
            { text: 'tags' }
          ]);
     return defer.promise;
 }

Upvotes: 3

Related Questions