CODEWITHSUNDEEP
angularjspromise
allencoded
allencoded

Reputation: 7275

Bypass / Defer AngularJS $http.get Promise

I am using ngTagsInput to handle my tags in my AngularJS project. It has an auto-complete directive. To handle the data going into the directive it assumes that you are going to do:

$scope.loadTags = function(query) {
    return $http.get('tags.json');
  };

Which returns a promise. Here comes the tricky part I want to do the same thing this is doing but I already have an object in my $scope that has all the tags I want to use for auto-completing. I can't simply do $scope.loadTags because this returns an error.

Cannot Read Property 'then' of Undefined.

How do I bypass this promise or defer it?

This is my plunker http://plnkr.co/edit/wEqVMf?p=preview

Directive: app.directive('tag', function($http) { return { restrict: 'E', templateUrl: 'tag.html', link: function (scope, el) { scope.tags = [ { text: 'Tag1' }, { text: 'Tag2' }, { text: 'Tag3' } ];

        var test = [{ text: 'Tag9' },{ text: 'Tag10' }];

        scope.loadTags = test;
    }
  }
});

Html which is inside of <tag>

<tags-input ng-model="tags">
  <auto-complete ng-model="loadTags"></auto-complete>
</tags-input>
<p>Model: {{tags}}</p>

Upvotes: 0

Views: 306

Answers (1)

Anthony Chu
Anthony Chu

Reputation: 37520

Use $q.when() to create a resolved promise from the array...

scope.loadTags = function () {
    var test = [{ text: 'Tag9' },{ text: 'Tag10' }];
    return $q.when(test); 
};

There is also one addition error in the tag.html template. ng-model="loadTags" should be source="loadTags(query)"...

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

Plunkr: http://plnkr.co/edit/fEO3MVInVe7TnFkHyCNq?p=preview

Upvotes: 2

Related Questions