AngularFire removes Firebase locations

StackOverflow https://stackoverflow.com/questions/18165971

Pregunta

I'm trying to create a collaborative story-making app, using Angular and Firebase. Follow this link to get an idea of where I'm headed so far. You click on the "plus" icon to show a textarea, and add to the parts that are already there. I'm sure there are many ways to improve what I've coded so far, but my specific problem right now relates to switching between stories.

I have another Firebase reference with two stories, and each of the stories has different parts. To create a way to switch between stories I tried the following:

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;
        }
    }
});
}

The above code isn't working for me. When "Story 1" or "Story 2" are clicked in the view I expected that the view would change to reflect the change in Firebase reference location (url). However, rather than the appropriate parts of the respective story appearing, nothing appears, and the parts locations (e.g. https://allstory.firebaseio.com/stories/story1/parts) for both stories are removed from my Firebase reference. My problem may be similar to this one.

I need the parts for "Story 1" or "Story 2" to appear when clicked. What can I change in my code to make this work? Should I try an entirely different approach to switching between stories?

¿Fue útil?

Solución

AngularFire retrieves data from Firebase asynchronously and returns a promise, not the actual data itself. Therefore, you have a bug in your code where you're assigning the promise to the scope variable but using it before the promise has been resolved.

I would fetch both stories first before allowing the user to switch between them. For example:

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"];
    }
}
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top