I think it's a "copy by val vs copy by ref" scenario... Here's what I did: http://plnkr.co/edit/ARcahWOlznAQTEEh82HD?p=preview I added a couple of blocks in index.html to see more details ($routeParams, $routeParams.bookId, bookId and $bookId with and without the main. prefix Also, in script.js, within MainCntl, I added this.$bookId I'm not sure if any of these are the lines that troubled you to begin with.
One possibly surprising aspect is that the MainCtrl is not re-run when you go from one "page" to the other. In fact, angular routing refreshes only the block of HTML marked as the view (<div ng-view class="view-animate"></div> in this case), and the blocks showing the output values are all outside of that container (but within the one using MainCntl as controller: <div ng-controller="MainCntl as main">) So, maybe the question should be why do we see some of these values being updated? The line in scripts.js (MainCntl): this.$routeParams = $routeParams makes this.$routeParams as a pointer to the $routeParams object that angular updates when we click onto a book/chapter link While: this.bookId = $routeParams.bookId; makes a value copy (the current value of $routeParams.bookId is copied and stored into this.bookId) So, if our HTML template has a binding ref to the variable in the former case (this.$routeParams), the angular 2-way binding will tell us when it is updated. That's true in the latter case as well, but because we grabbed a copy of the $routeParams.bookId value when running through MainCntl the first time, we are not being told when $routeParams is updated through successive clicks/navigation Why the difference? If I'm not mistaken the answer would come from JavaScript rather than angular knowledge. I know, someone will correct me if I'm wrong, but at least they'll enlighten me too! HTH, F On Monday, February 3, 2014 3:01:49 PM UTC-5, Marc Dirix wrote: > > Ok here is a plunker: http://plnkr.co/edit/yoN9nMiX5cHSr8SHOFu2?p=preview > > I've just edited the ngView example ( > http://docs.angularjs.org/api/ngRoute.directive:ngView), since it doesn't > use $scope, I didn't add it. > > /Marc > > > On Mon, Feb 3, 2014 at 7:56 PM, Francesco Rizzi > <[email protected]<javascript:> > > wrote: > >> I've had no trouble picking up a route parameter (as >> $routeParams.bookId), setting a scope property to that value, and >> displaying that value in the template/view (via binding). >> I'm a bit surprised by your use of this.$bookId (instead of the more >> canonical $scope.bookId), and inclusion of "main" in your {{main.$bookId}}, >> but maybe I'm missing something. >> Do you have a quick plunker to show the issue? >> HTH, >> F >> >> >> On Sunday, February 2, 2014 5:17:48 PM UTC-5, Marc Dirix wrote: >>> >>> Hello, >>> >>> I've been trying some things with the ngView example, and am a bit >>> curious why this doesn't work as I expected. >>> >>> Why can I do in a the MainCtrl: >>> >>> this.$routeParams = $routeParams; >>> >>> and then in the output say: >>> >>> {{main.$routeParams.bookId}} >>> >>> But am I not allowed to do in MainCtrl: >>> >>> this.$bookId = $routeParams.bookId >>> >>> {{main.$bookId}} returns blank. >>> >>> Is there a way around this? >>> >>> Best regards, >>> >>> Marc Dirix >>> >> -- >> You received this message because you are subscribed to a topic in the >> Google Groups "AngularJS" group. >> To unsubscribe from this topic, visit >> https://groups.google.com/d/topic/angular/9Vl2wb0RR5s/unsubscribe. >> To unsubscribe from this group and all its topics, send an email to >> [email protected] <javascript:>. >> To post to this group, send email to [email protected]<javascript:> >> . >> Visit this group at http://groups.google.com/group/angular. >> For more options, visit https://groups.google.com/groups/opt_out. >> > > > > -- > Marc Dirix Computers > Schmeddingstraat 24 > 6361AZ Nuth > -- You received this message because you are subscribed to the Google Groups "AngularJS" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/angular. For more options, visit https://groups.google.com/groups/opt_out.
