AngularFire удаляет местоположения Firebase

Я пытаюсь создать совместное приложение для создания истории, используя Angular and Firebase. Follow this link, чтобы понять, куда я направляюсь. Вы нажимаете на значок «плюс», чтобы показать текстовое поле, и добавьте к тем частям, которые уже есть. Я уверен, что есть много способов улучшить то, что я закодировал до сих пор, но моя конкретная проблема прямо сейчас связана с переключением между историями.AngularFire удаляет местоположения Firebase

У меня есть другая ссылка Firebase с двумя историями, и каждая из историй имеет разные части. Для того, чтобы создать способ переключения между историй, которые я попробовал следующее:

HTML:

<!doctype html> 

<html lang="en" ng-app = "StoryApp"> 
<head> 
    <script src="https://cdn.firebase.com/v0/firebase.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angularFire/0.1.0/angularfire.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <script src="app.js"></script> 
</head> 
<body> 
    <div class="wrapper" ng-controller="WrapperCtrl"> 
     <div class="nav"> 
      <a ng-repeat="story in storyList" ng-click="switchStory(story.location)" href="#" id="{{story.identity}}" style="margin-left:0.5em;">{{story.title}} Button</a> 
     </div> 
     </br> 
     <div class="insideWrapper"> 
     <span class="item" id="{{part.number}}" ng-repeat="part in parts" ng-controller="ItemCtrl">{{part.text}} 
      <span ng-click="show=!show" style="margin-left:0.25em;color:blue;cursor:pointer;">+(Add Part Here)</span> 
      <form ng-show="show" ng-submit="addItem()"> 
       <textarea ng-model="itemText" placeholder="Your story"></textarea> 
       <br> 
       <button type="submit" class="submit-button" value="submit" ng-click="show=!show">add</button> 
       <button ng-click="show=!show">cancel</button> 
      </form> 
     </span> 
    </div> 
    </div> 
</body>

JavaScript:

var gApp = angular.module('StoryApp', ['firebase']); 

function WrapperCtrl($scope, angularFire){ 
    var urlStories = 'https://allstory.firebaseio.com/stories'; 
    $scope.storyList = angularFire(urlStories, $scope, 'storyList', {}); 

    function getStory(url){ 
     var urlParts = url; 
     $scope.parts = angularFire(urlParts, $scope, 'parts', []); 
    } 

    $scope.switchStory = function(location){ 
     getStory(location); 
    }; 

    getStory('https://allstory.firebaseio.com/stories/story1/parts'); 
} 

function ItemCtrl($scope){ 
    $('.wrapper').on('click', '.submit-button', function(event) { 
     var idNum = function() { 
      return event.target.parentNode.parentNode.id; 
     }; 

    $scope.addItem = function(){ 
     $scope.parts.splice(Number(idNum())+1, 0, {text:$scope.itemText, number:Number(idNum())+1}); 
     $scope.itemText = ''; 
     reNumber(); 
    }; 

    function reNumber() { 
     var i = Number(idNum())+2, len=$scope.parts.length; 

     for (; i < len; i++) { 
      $scope.parts[i].number = i; 
     } 
    } 
}); 
}

Приведенный выше код не работает для меня. Когда в представлении «Story 1» или «Story 2» отображается мнение, я ожидал, что представление изменится, чтобы отразить изменение в исходном местоположении Firebase (url). Однако, вместо соответствующих частей соответствующей истории, ничего не появляется, и места деталей (например, https://allstory.firebaseio.com/stories/story1/parts) для обеих историй удаляются из моей ссылки Firebase. Моя проблема может быть похожа на this one.

Мне нужно детали для «Story 1» или «Story 2», чтобы появиться при нажатии. Что я могу изменить в своем коде, чтобы сделать эту работу? Должен ли я попробовать совершенно другой подход к переходу между историями?

источник

2013-08-10 Cece Webb

AngularFire асинхронно извлекает данные из Firebase и возвращает обещание, а не фактические данные. Поэтому у вас есть ошибка в коде, где вы назначаете обещание переменной области видимости, но используете ее до того, как обещание будет разрешено.

Я бы взял обе истории сначала, прежде чем позволить пользователю переключаться между ними. Например:

function WrapperCtrl($scope, angularFire) { 
    $scope.showStories = false; 
    var urlStories = 'https://allstory.firebaseio.com/stories'; 
    angularFire(urlStories, $scope, 'storyList', {}).then(function() { 
     $scope.showStories = true; 
    }); 

    $scope.switchStory = function(location) { 
     // var name = manipulate location to extract story number or name, like "story1". 
     $scope.parts = $scope.storyList[name]["parts"]; 
    } 
}

источник

2013-08-12 18:23:35 Anant

AngularFire удаляет местоположения Firebase

ответ

Смежные вопросы