Fiddling with the ngView example

[Marc Dirix]

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

[Francesco Rizzi]

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

[Marc dirix]

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

--
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 angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
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

[Francesco Rizzi]

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

[Marc dirix]

Hi,

I think you're right about the copy by value vs copy by reference. It makes things much more clear for me.

Thank you!

/Marc