Completamento automatico utilizzando ngTagsInput Impossibile leggere la proprietà 'allora' di undefined

Question

Sto cercando di capire questo problema ma non sto avendo fortuna.

Questo è il plunker che ho scritto che funziona. Si noti che il codice funziona perfettamente quando sto accedendo a tags.json utilizzando $ http.get.

angolare Codice direttiva:

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 all'interno della 'tag.html':

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

Pic di lavoro:

---

Grande ma, I don' T voglio usare $http.get perché ho già un oggetto th a contiene i tag che voglio usare per il completamento automatico. Così ho provato questo

angolare Codice direttiva:

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 all'interno della mia 'tag.html':

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

MA questo non funziona affatto. Invece ho

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 al mio Plunk: http://plnkr.co/edit/wEqVMf?p=info

Answer 1

Così il loadFunction deve essere cambiato in modo che restituisca una promessa:

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

In aggiunta a ciò, è necessario correggi il tuo markup quindi usa l'opzione source:

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

Questo ha risolto il mio problema