ngTagInput дает ошибку консоли javascript при вызове через директиву

Question

Я пытаюсь реализовать [ngTagsInput][1] в своем проекте angularjs. Ниже моя установка

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

и на мой взгляд (myview.html.haml)

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

, который так же, как

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

** Над кодом я скопировал из ngTagInput плагин сам сайт. и я использую CDN для загрузки тех же версий, что и на сайте плагина. Но когда я печатаю теги им получить следующую ошибку в моей консоли JavaScript

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 

это выглядит как что-то делать с обещаниями. (Я довольно новичок в angularjs, и я просто догадываюсь), но мне интересно, как это работает в примере, приведенном в website

Но если я загружаю теги при загрузке страницы, он отлично работает. Что здесь может быть не так. любая помощь была бы оценена

редактировать после комментариев @Pierre и мой новый код выглядит следующим образом

Я, вероятно, забыл самую важную часть, я звоню это теги метод автозаполнения (in controller) из directive. (Жаль, что ... :()

recipeform.tags моя модель

#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' } 
     /*]*/ 
     } 

Оба коды JS дают ту же ошибку, что и предыдущий :(

Answer 1

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

"Источник" является метод должен вернуть обещание, которое будет использоваться для возврата тегов. Не вводить их в вашу модель ...

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

должен работать. Если нет, то это означает, что директива нужна РЕАЛЬНАЯ обещание, то вам нужно будет сделать (но я не думаю, что вам нужно будет идти так далеко):

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