1

私は[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プラグイン Web サイト自体からコピーしました。CDN を使用して、プラグイン Web サイトと同じバージョンをロードしています。しかし、タグを入力すると、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推測しているだけです）、しかし、ウェブサイトに示されている例ではどのように機能するのだろうか

しかし、ページの読み込みでタグを読み込むと、問題なく動作します。ここで何が問題になる可能性があります。どんな助けでも大歓迎です

@Pierreコメントの後に編集すると、私の新しいコードは次のようになります

おそらく最も重要な部分を忘れてしまったのでしょう。このタグの autocomplete メソッド ( 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コードは、前と同じエラーを出します:(

4

1 に答える 1

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

「ソース」は、タグを返すために使用される promise を返すことになっているメソッドです。それらをモデルに注入しないでください...

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

動作するはずです。そうでない場合は、ディレクティブに REAL の約束が必要であることを意味し、実行する必要があります (ただし、ここまでする必要はないと思います)。

$scope.loadTags = function(query) {
     var defer = $q.defer();
     defer.resolve([
            { text: 'just' },
            { text: 'some' },
            { text: 'cool' },
            { text: 'tags' }
          ]);
     return defer.promise;
 }
于 2014-11-06T17:19:39.983 に答える