angular ui router - Why don't comment upvotes work? thinkster.io, angularjs tutorial, mean, incrementUpvote() -
i'm following thinkster angular js tutorial here:
https://thinkster.io/angulartutorial/mean-stack-tutorial/
and clicking on upvotes icon next comment fails increment upvote count.
in ui-router template(included inline in index.html), ng-click calls addupvote()--but addupvote() defined controller specified in state. way template can call addupvote() if template's associated state/controller somehow inherits other state/controller. , in fact, according ui-router docs here:
https://github.com/angular-ui/ui-router/wiki/nested-states-%26-nested-views
the way states defined in app.js,
app.js:
app.config([ '$stateprovider', '$urlrouterprovider', function($stateprovider, $urlrouterprovider) { $urlrouterprovider.otherwise('home'); $stateprovider .state('home', { url: '/home', templateurl: '/home.html', controller: 'mainctrl' } ) .state('posts', { url: '/posts/{id}', templateurl: '/posts.html', controller: 'postsctrl' } ); }]); ...the second state inherits first state edit: more careful reading of docs makes me believe isn't true; think in order posts state inherit home state, have change name of posts state home.posts. however, when try that, breaks else: comments link next post no longer works. in case, don't think writing:
$stateprovider .state(...) .state(...); creates inheritance between 2 states.
here first state's controller:
app.controller('mainctrl', ['$scope', 'posts', function($scope, posts) { $scope.posts = posts.posts; /* [ {title: "post1", upvotes: 3, link: ''}, {title: "post2", upvotes: 5, link: ''}, {title: "post3", upvotes: 1, link: ''} ]; */ $scope.addpost = function() { var title = $scope.title; if (title && (title.trim().length > 0) ) { $scope.posts.push({ title: title, upvotes: 0, link: $scope.link, comments: [ {author: 'joe', body: 'cool post!', upvotes: 0}, {author: 'bob', body: 'great idea, wrong!', upvotes: 0} ] }); } $scope.title = ''; $scope.link = ''; } //*****here function not being called***** $scope.addupvote = function(post) { console.log("in addupvote"); ++post.upvotes; } }]); as far can determine, template should able call addupvote(). however, console.log() line doesn't output when click on upvote icon next comment, addupvote() not being called.
here portion of index.html:
<body ng-app="flappernews"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <ui-view></ui-view> </div> </div> .... .... .... <script type="text/ng-template" id="/posts.html"> <div class="page-header"> <h3> <a ng-show="post.link" href="{{post.link}}"> {{post.title}} </a> <span ng-hide="post.link"> {{post.title}} </span> </h3> </div> <div ng-repeat="comment in post.comments | orderby:'-upvotes'"> <span class="glyphicon glyphicon-thumbs-up" ng-click="addupvote(comment)"></span> {{comment.upvotes}} - {{comment.author}} <span style="font-size:20px; margin-left:10px;"> {{comment.body}} </span> </div> </script> </body> towards bottom of template, ng-click calls addupvote(). why isn't addupvote() being called.
the explanation little further down in docs:
scope inheritance view hierarchy only
keep in mind scope properties inherit down state chain if views of states nested. inheritance of scope properties has nothing nesting of states , nesting of views (templates).
it entirely possible have nested states templates populate ui-views @ various non-nested locations within site. in scenario cannot expect access scope variables of parent state views within views of children states.
and:
what child states inherit parent states?
child states inherit following parent states:
resolved dependencies via resolve
custom data properties
nothing else inherited (no controllers, templates, url, etc). ... ... child states inherit data properties parent state(s), can overwrite.
$stateprovider.state('parent', { data:{ customdata1: "hello", customdata2: "world!" } }) .state('parent.child', { data:{ // customdata1 inherited 'parent' // we'll overwrite customdata2 customdata2: "ui-router!" } }); so make comment upvotes work, did this:
app.controller('postsctrl', [ '$scope', '$stateparams', 'posts', function($scope, $stateparams, posts) { $scope.post = posts.posts[$stateparams.id]; $scope.addupvote = function(comment) { console.log('comment upvote'); ++comment.upvotes; } }]); 
Comments
Post a Comment