Angular + Firebase Application - ngTagsInput Error: Cannot read property of 'data' undefined

Question

我正在使用 ng-tags-input 将标记添加到 Angular + Firebase 应用程序。

我运行在尝试使用自动完成功能从 firebaseArray 自动填充标签时遇到以下错误，该 firebaseArray 提取存储在我的 firebase 中的现有标签的值 /tags

错误

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>

JAVASCRIPT

$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...如果您查看控制台输出，您将看到在错误被触发...

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

Answer 1

ngTagsInput 可以很好地处理承诺。您需要做的只是 return 您的 loadTags 函数的承诺：

$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()。当您提供错误回调时，您必须 return 一个被拒绝的承诺，否则整个承诺将被视为已履行。

Angular + Firebase Application - ngTagsInput Error: Cannot read property of 'data' undefined

Angular + Firebase Application - ngTagsInput Error: Cannot read property of 'data' undefined

angularjs

firebase

angularfire

ng-tags-input