javascript - AngularJS - Problems displaying data between views -
i'm working on simple angular app has 'posts', , 'comments' associated posts.
i have 2 views: 'home', , 'posts'.
so example:
- create post through main view
- try view specific post , comments through 'posts/{id}'
i'm having problems trying transfer data between home , posts view. have of views in 'static' directory, , i'm not getting console errors, i'm not sure problem is.
app.js
angular.module('flappernews', ['ui.router']) // set routing/configuration // ------------------------------ .config(['$stateprovider', '$urlrouterprovider', // set state providers function($stateprovider, $urlrouterprovider) {$stateprovider // home state .state('home', { url: '/home', templateurl: '/static/home.html', controller: 'mainctrl' }) // posts state .state('posts', { url: '/posts{id}', templateurl: '/static/posts.html', controller: 'postsctrl' }) $urlrouterprovider.otherwise('home'); } ]) // posts factory // factories used organize , share code across app. // ------------------------------ .factory('posts', [function(){ // create new obect array of posts var o = { posts: [] }; return o; }]) // main controller // ------------------------------ .controller('mainctrl', ['$scope', 'posts', // main scope (used in views) function($scope, posts){ // array of posts $scope.posts = posts.posts; // add post function $scope.addpost = function(){ // prevent empty titles if(!$scope.title || $scope.title === '') { return; } // push new post array $scope.posts.push({ title: $scope.title, date: new date().tojson().slice(0,10), comments: [ {author: 'joe', body: 'cool post!'}, {author: 'bob', body: 'great idea wrong!'} ] }); // reset title $scope.title = ''; }; } ]) // posts controller // ------------------------------ .controller('postsctrl', ['$scope', '$stateparams', 'posts', // main scope (used in views) function($scope, $stateparams, posts){ $scope.post = posts.posts[$stateparams.id]; } ]); views:
index.html
<html> <head> <title>my angular app!</title> <link href="css/main.css" rel="stylesheet" type="text/css"> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script> <script src="js/app.js"></script> </head> <!-- start body --> <body ng-app="flappernews"> <!-- render template --> <ui-view> </ui-view> <!-- end render --> </body> <!-- end body --> static/home.html
<div class="page-header"> <h1>aloof news</h1> </div> <!-- list posts --> <table ng-repeat="post in posts | orderby: 'date':true"> <tr> <td>{{post.title}}</td> <td>{{post.date}}</td> <td><a href="/posts/{{$index}}">comments</a></td> </div> </tr> </table> <!-- end list --> <!-- add post --> <form ng-submit="addpost()"> <input type="text" ng-model="title"></input> <button type="submit">post</button> </form> <!-- end add --> static/posts.html
<h3> <a ng-show="post.link" href="{{post.link}}"> {{post.title}} </a> </h3> <div ng-repeat="comment in post.comments"> {{comment.author}} <br> {{comment.body}} </div> any tips?
take @ code in plunker : http://plnkr.co/edit/1vqauxo0rn9jq93sda7t?p=preview
some changes had was:
// posts state .state('posts', { url: '/posts/{id}', templateurl: 'posts.html', controller: 'postsctrl' }) home.html
<table ng-repeat="post in posts | orderby: 'date':true"> <tr> <td>{{post.title}}</td> <td>{{post.date}}</td> <td><a ui-sref="posts({id:$index})">comments</a></td> </tr> </table>
Comments
Post a Comment