AngularJS value not passing to directive

Question

I am using ngTagsInput which has an auto-complete feature. It seems to be working very well. My problem is I want to know how to pass the query from source="loadTags(query)" into the directive, but query is always undefined. Query should simply be whatever text is typed in the search box.

Angular:

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

        scope.loadTags = function(query) {
          console.log(query)
          var deferred = $q.defer();
          deferred.resolve([{ text: 'Tag9' },{ text: 'Tag10' }]);
          return deferred.promise;
        };
    }
  }
});

HTML:

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

My Plunker: http://plnkr.co/edit/3UuRok?p=info

Omri Aharon · Accepted Answer · 2014-04-16 16:03:00Z

2

This will fix it for you:

Change

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

To

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

See updated Plunker.

answered Apr 16, 2014 at 16:03

Omri Aharon

17.1k5 gold badges43 silver badges61 bronze badges

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

Collectives™ on Stack Overflow

AngularJS value not passing to directive

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related