0

Angular と Firebase を使用して、共同ストーリー作成アプリを作成しようとしています。 このリンクをたどって、私がこれまでにどこに向かっているのかを理解してください。「プラス」アイコンをクリックしてテキストエリアを表示し、既存のパーツに追加します。これまでにコード化したものを改善する方法はたくさんあると思いますが、現在の私の特定の問題は、ストーリー間の切り替えに関連しています。

2 つのストーリーを持つ別の 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) の変更を反映してビューが変更されると予想していました。ただし、それぞれのストーリーの適切な部分が表示されるのではなく、何も表示されず、両方のストーリーのパーツの場所 (例: https://allstory.firebaseio.com/stories/story1/parts ) が Firebase 参照から削除されます。私の問題はこれに似ているかもしれません。

クリックしたときに「ストーリー1」または「ストーリー2」のパーツが表示されるようにする必要があります。これを機能させるには、コードで何を変更できますか? ストーリーを切り替えるには、まったく別のアプローチを試す必要がありますか?

4

1 に答える 1