0

我正在尝试使用 Angular 和 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;
        }
    }
});
}

上面的代码对我不起作用。当在视图中单击“故事 1”或“故事 2”时，我预计视图会发生变化以反映 Firebase 参考位置（url）的变化。但是，没有出现相应故事的适当部分，而是什么都没有出现，并且从我的 Firebase 参考中删除了两个故事的部分位置（例如https://allstory.firebaseio.com/stories/story1/parts）。我的问题可能与此类似。

我需要单击时出现“故事 1”或“故事 2”的部分。我可以在我的代码中进行哪些更改以使其正常工作？我应该尝试一种完全不同的方法来切换故事吗？

4

1 回答 1

1

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-12T18:23:35.140 回答