Autouzupełnianie przy użyciu polecenia ngTagsInput nie może odczytać właściwości 'wtedy' nieokreślonego

Question

Próbuję zrozumieć ten problem, ale nie mam szczęścia.

To jest ten plunker, który napisałem, który działa. Zauważ, że kod działa idealnie, gdy uzyskuję dostęp do tags.json za pomocą $ http.get.

kątowa dyrektywa Kod:

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 = function (query) { 
      return $http.get('tags.json'); 
     } 
    } 
    } 
}); 

HTML wewnątrz 'tag.html':

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

roboczej Pic:

---

Wielki, ale I don” Chcę używać $http.get, ponieważ mam już obiekt th ma znaczniki w środku, które chcę użyć do autouzupełniania. Więc próbowałem to

kątowa dyrektywę Kod:

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 wewnątrz mojego 'tag.html':

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

ale to nie działa w ogóle. Zamiast dostać

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

link do mojego upadać: http://plnkr.co/edit/wEqVMf?p=info

Answer 1

Więc loadFunction musi być zmieniony tak, że zwraca obietnicę:

app.directive('tag', function($q) { 
    ... 
    link: function(scope) { 
     $scope.loadTags = function() { 
      var deferred = $q.defer(); 
      deferred.resolve([{ text: 'Tag9' },{ text: 'Tag10' }]); 
      return deferred.promise; 
     } 
    } 
} 

Poza tym, trzeba popraw znaczniki, aby korzystać z opcji źródła:

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

To naprawiło mój problem