How to get global scope of page when route changes

Question

I have template (that is not defined by router), where I have 2 links (anchors), which changes variable

<a ng-href="#/service/service1"
   ng-click="activeService='minecraft'">

And then I have 2 images - their class depends on the variable set by ng-click

ng-class="activeService != 'none' ? { true: 'service-maximize-animate', false: 'service-minimize-animate'}[activeService=='service1'] : ''"

This works perfectly. But when I press back button in browser or change URL address directly, route changes, ng-view updates, BUT the images (in global template that is not set by router) don't update (they are not in ng-view (the template))

And here I face the problem - I have to use controller, but I can't use controller by router, because it's scope is only for the template (ng-view).

I also tried to use ng-controller, but it is not called, when route changes.

Is there any way, to solve it? Also, I would like to know if there is any way to make the ng-view better readable, now it's horrible :)

Thanks, Michal Hojgr

EDIT: jsfiddle: http://jsfiddle.net/5rzGU/9/

Does it also have to work if a user hits the back button in the browser instead of in your app? — Sharondio, Jun 01 '13 at 20:44
Yes, that's what I am talking about - and it's the only issue — Michal Hojgr, Jun 01 '13 at 21:21

score 0 · Answer 1 · edited May 23 '17 at 10:25

0

A jsfiddle/plunker would be very helpful here.

From what I understand, the two controllers are independent. When you go back or forward in the url only ng-view changes because only ng-view deals with the router. The other controller doesn't know what is going on with ng-view's controller. Either you need to send a message from the ng-view controller to the other controller, as discussed here: AngularJS: How can I pass variables between controllers?

Or you could consider converting the second controller into a directive.

As for improving the readability of ng-view. Consider splitting it into smaller modules – directives where possible.

edited May 23 '17 at 10:25

Community

1
1

answered Jun 01 '13 at 19:55

winkerVSbecks

1,173
1
10
24

You jsfiddle doesn't work. There is no `ng-view` or `ng-app="myApp"`. It seems like you are trying to add a navigation bar to your view. Why not do that within the `ng-view` itself? If you need access to the `serviceId` you can get that through `$routeParams`: [http://docs.angularjs.org/api/ng.$routeParams](http://docs.angularjs.org/api/ng.$routeParams). And then based on the value of `$routeParams` you can set the `activeService` class. – winkerVSbecks Jun 01 '13 at 22:39
The JS fiddle works - it changes and prints the variable when you click links. What doesn't work is the back button - and I want to solve it somehow :) I will try to do something with ng-view :) – Michal Hojgr Jun 01 '13 at 22:46
Yes the `variable` works because angular treats everything in the HTML part as an angular app. The `myApp` module that you created doesn't actually run. – winkerVSbecks Jun 01 '13 at 22:50
Oh, that's truth. However, I started writing the javascript and then I realised, that I don't know how to do it anyway :( – Michal Hojgr Jun 01 '13 at 22:59

score 0 · Accepted Answer · answered Jun 02 '13 at 13:53

I solved it using Angular's Observer system. In controller, that was called after route has changed, it broadcasted an event

$rootScope.$broadcast('event');

and in controller, that had different $scope than the router one, it listens for event

 $scope.$on('event', function() {
       //code
 });

Hope it helps anyone :)

How to get global scope of page when route changes

2 Answers2