Prevent Angularjs to render template on route change

Question

I am using angular routes for app navigation and ng-view to render templates on route change.

But in a certain case, I want to call my another controller and render the template in a seperate ng-include (beacuse we don't use more then one ng-view and I don't want to use ui-route).

While doing this I don't want my existing view to change but need to change route.

UPDATE : Example what I need actually-
Supopse I am on route abc with xyz template and controller ctrl.
Then make some search and populate some data.
After clicking on link (in template xyz) I need to change the route to abc1 with template xyz1 (like an overlay) but have to reatin all the previous view (i.e xyz template and data that was ppulated).

Thanks

score 1 · Answer 1 · answered Oct 22 '13 at 15:00

Bind your views to a scoped variable in your controller... this gives you way more flexibility then ng-view and essentially acts as an interceptor.

This way, you can listen for:

$scope.$on('$routeUpdate', function(event, route){
  if(condition){
    $scope.template = 'mytemplate.html';
  }
});

And wrap logic around your views to decide which one meets your conditions.

<div ng-include="'template'"></div>

score 0 · Answer 2 · edited May 23 '17 at 12:10

You can add additional parameters in your routes, which can then be accessed as routeparams. You can also use the same template for several views.

You can combine this to do what you want (assuming I understand you correctly). Direct both routes to the same page and give an extra variable to the second route that you can use to show the additional content (via ng-include). The variable you set in the route could be a template url that you could then use in the ng-include statement.

An example:

  .when('/mypage', {
    templateUrl: 'mypage.html'
  })
  .when('/myotherpage', {
    templateUrl: 'mypage.html',
    to_be_inclyded: 'myotherpage.html'
  })

Edit: You can also have multiple controllers on a page (even if you set a controller directly in the route). So you can have a separate controller for the included content like this.

<div ng-controller="MyController">
  <!-- Page content of the original view goes here. -->
  <!-- Note that you could have specified this controller in the route instead. -->
  ...
  ...
  ...

  <!-- Here we put the include, and we can simply give it a new controller -->
  <div ng-include="{{to_be_included}}" ng-controller="MyOtherController"></div>
</div>

In fact, you should pretty much always do this. There is no reason to try to cram an entire page with several sections into one controller. Instead give each section/feature its own controller, this will make your code much simpler and much easier to follow.

Edit again: I'll leave the above for completeness but with the example you included I think I see the problem more clearly. The big issue is not that you need to load the same view, it's that when the route changes the controller will reload and you lose all changes you made. So any search or other action the user has taken in the view will be cleared.

The default $route will always (and by design) reload controllers when changing url. To do what you want to do I would check out the UI-router project (https://github.com/angular-ui/ui-router). It is an alternative to using the default $route and it gives you more control over the exact behavior. I haven't tried it so I don't know if this exact use case is supported, but it looks promising.

If you don't want to do that or if it doesn't work (I haven't tried using it) then you might be able to work around the problem. I know of two other methods.

Use get-parameters instead of changing the url. Instead of going from /mypage to /myotherpage you go from /mypage to /mypage?foo=bar. There is setting called reloadOnSearch that prevents the routes from reloading when doing this, so if you are ok with urls that aren't as pretty then you can use this.
Accept the reload but save the data between the routes. You can store data in a service (Angularjs, passing scope between routes), and each time your base controller runs it can import that data, thereby keeping it's state between routes. This is not as clean as just not reloading at all and could cause some flickering in your view (you would have to try), but it is fairly easy to do.

This answer assumes that you are trying to change only part of your page based on the route, while leaving the rest unchanged. — Erik Honn, Oct 22 '13 at 15:01
In my case there is another controller that is already attached to first template and I need to attach other to second template (that I need to load with ng-include). — Amritpal singh, Oct 23 '13 at 05:27
You can nest ng-controller, so you can give your include its own controller. I updated the answer with an example of that. Is this about what you are trying to do? — Erik Honn, Oct 23 '13 at 13:00
Erik Thanks for your answer. I have updated my question. Please have a look. — Amritpal singh, Oct 24 '13 at 15:10
Ah, so one of the problems is that you lose the data when changing the route? You want xyz template and the ctr in your example to not lose the search you have done? I'll update my answer. — Erik Honn, Oct 25 '13 at 13:23

Prevent Angularjs to render template on route change

2 Answers2