Угловое приложение + Firebase - ошибка ngTagsInput: не удается прочитать свойство 'data' undefined

Question

Я использую ng-tags-input для добавления меток в приложение Angular + Firebase.

Я бег в следующем сообщении об ошибке при попытке использовать автозаполнение для автоматического заполнения тегов из firebaseArray, которые тянущие значения существующих тегов, хранящихся в моем 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> 

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) и используя Promises в моем firebase запросе ... если вы смотрите на выходе консоли вы увидите, где обещание выполняются после срабатывает ошибка ...

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 для асинхронного запуска и загрузки значений только после выполнения обещания?

Буду признателен за любую помощь или предложения.

Cheers! @FellowHobbyist

Answer 1

ngTagsInput может обрабатывать обещания просто отлично. Все, что вам нужно сделать, это вернуть обещание из вашей 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(), что я включил в свой код. Когда вы предоставляете обратный вызов ошибки, вы должны вернуть отклоненное обещание, иначе обещание в целом будет считаться выполненным.