javascript - 通过指令调用时，ngTagInput 出现 javascript 控制台错误

Question

我正在尝试在我的 angularjs 项目中实现 [ngTagsInput][1]。以下是我的设置

#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 

它看起来像是与 promises 有关的东西。 (我对 angularjs 很陌生，我只是在猜测)，但我想知道它在 website 中给出的示例中是如何工作的

但是如果我在页面加载时加载标签，它就可以正常工作。这里可能出了什么问题。任何帮助将不胜感激

在@Pierre 评论后编辑，我的新代码如下所示

我可能忘记了最重要的部分，我从指令调用这个标签自动完成方法(在 Controller 中)。 (对此感到抱歉...... :()

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>

“来源”是一种应该返回 promise 的方法，它将用于返回标签。不要将它们注入(inject)您的模型...

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

应该可以。如果不是，则意味着该指令需要一个真正的 promise ，那么您将需要做(但我认为您不需要走这么远):

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