0

Angular + Firebase アプリケーションにタグ付けを追加するために ng-tags-input を使用しています。

オートコンプリートを利用して firebaseArray からタグを自動入力しようとすると、/tags の Firebase に保存されている既存のタグの値を取得しようとすると、次のエラーが発生します。

エラー

TypeError: Cannot read property 'data' of undefined

これが私のコードです...

HTML

<div class="form-group">
      <label for="inputTags" class="col-lg-2 control-label">Tags</label>
      <div class="col-lg-3">
        <tags-input ng-model="post.tags" >
          <auto-complete source="loadTags()"
                     min-length="1"
                     load-on-focus="true"
                     load-on-empty="true"
                     max-results-to-show="32"></auto-complete>
        </tags-input>
    </div>
</div>

ジャバスクリプト

$scope.loadTags = function() {
      var tagsArray = ['test']; //simply a test value
      var tagsRef = new Firebase(FIREBASE_URL + 'tags');
      tagsRef.once('value').then(function(snapshot) {
          // The Promise was "fulfilled" (it succeeded).
          console.log('Promise was fulfilled');

          // handle data
          angular.forEach (snapshot.val(), function(tag) {
            tagsArray.push(tag.name);
          });

          console.log(tagsArray);
          return tagsArray
        }, function(error) {
          // The Promise was rejected.
          console.log('Promise was rejected');
          console.error(error);
      });
      //return tagsArray;  <-- This Works, but doesn't include firebaseArray values
    };

ご覧のとおり、私は最新の Firebase バージョン (2.4.0) を使用しており、Firebase クエリで Promises を使用しています...コンソール出力を見ると、エラーがトリガーされた後に Promise がどこで満たされているかがわかります. .

TypeError: Cannot read property 'data' of undefined
    at ng-tags-input.js:590
    at processQueue (angular.js:14792)
    at angular.js:14808
    at Scope.$eval (angular.js:16052)
    at Scope.$digest (angular.js:15870)
    at Scope.$apply (angular.js:16160)
    at angular.js:17927
    at completeOutstandingRequest (angular.js:5552)
    at angular.js:5829(anonymous function) @ angular.js:12520(anonymous function) @ angular.js:9292processQueue @ angular.js:14800(anonymous function) @ angular.js:14808Scope.$eval @ angular.js:16052Scope.$digest @ angular.js:15870Scope.$apply @ angular.js:16160(anonymous function) @ angular.js:17927completeOutstandingRequest @ angular.js:5552(anonymous function) @ angular.js:5829

posts.controller.js:15 Promise was fulfilled
posts.controller.js:22 ["test", "firebase", "javascript", "node.js", "angular.js", "bower.js", "npm", "angular.js", "bootstrap"]

質問？

ng-tags-input を非同期で実行し、約束が満たされた場合にのみ値をロードするように設定する方法はありますか?

助けや提案をいただければ幸いです。

乾杯！@FellowHobbyist

4

1 に答える 1

1

ngTagsInput はプロミスを問題なく処理できます。loadTags関数から promise を返すだけです。

$scope.loadTags = function() {
  var tagsRef = new Firebase(FIREBASE_URL + 'tags');
  return tagsRef.once('value').then(function(snapshot) {
      console.log('Promise was fulfilled');

      var tagsArray = ['test'];
      angular.forEach (snapshot.val(), function(tag) {
        tagsArray.push(tag.name);
      });

      console.log(tagsArray);
      return tagsArray;
    }, function(error) {
      console.log('Promise was rejected');
      console.error(error);
      return $q.reject(); // <== This is important!
  });
};

$q.reject()また、コードに含めたことにも注意してください。エラー コールバックを提供する場合は、拒否された promise を返す必要があります。そうしないと、promise 全体が満たされたと見なされます。

于 2016-01-25T03:45:03.717 に答える