javascript - AngularFire removes Firebase locations -
i'm trying create collaborative story-making app, using angular , firebase. follow link idea of i'm headed far. click on "plus" icon show textarea, , add parts there. i'm sure there many ways improve i've coded far, specific problem right relates switching between stories.
i have firebase reference 2 stories, , each of stories has different parts. create way switch between stories tried 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 = number(idnum())+2, len=$scope.parts.length; (; < len; i++) { $scope.parts[i].number = i; } } }); } the above code isn't working me. when "story 1" or "story 2" clicked in view expected view change reflect change in firebase reference location (url). however, rather appropriate parts of respective story appearing, nothing appears, , parts locations (e.g. https://allstory.firebaseio.com/stories/story1/parts) both stories removed firebase reference. problem may similar this one.
i need parts "story 1" or "story 2" appear when clicked. can change in code make work? should try entirely different approach switching between stories?
angularfire retrieves data firebase asynchronously , returns promise, not actual data itself. therefore, have bug in code you're assigning promise scope variable using before promise has been resolved.
i fetch both stories first before allowing user switch between them. 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 extract story number or name, "story1". $scope.parts = $scope.storylist[name]["parts"]; } }
Comments
Post a Comment