CODEWITHSUNDEEP
angularjs
Amritpal singh
Amritpal singh

Reputation: 865

Prevent Angularjs to render template on route change

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

Upvotes: 0

Views: 1937

Answers (2)

Erik Honn
Erik Honn

Reputation: 7576

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.

  1. 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.
  2. 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.

Upvotes: 0

Dan Kanze
Dan Kanze

Reputation: 18595

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>

Upvotes: 1

Related Questions