AngularJS - template with subparagraphs

Question

I am new to Angular.js and I cannot figure out how to solve my problem.

The application consists of three main tabs, which are also top-level routes, i.e.

#/home #/inbox #/products 

The current route configuration looks something like this (coffeescript):

 $routeProvider. when('/home', templateUrl: 'home.html'). when('/inbox', templateUrl: 'inbox.html'). when('/inbox/:thread_id', templateUrl: 'inbox.html', controller: 'MessagesCtrl'). otherwise(redirectTo: '/inbox') 

Now the problem is viewing incoming messages .

Inbox view ( inbox.html ) is a split column template containing a list of message flows on the left and messages of the selected stream on the right:

  -------------------------- | Navigation | -------------------------- | | | | Threads | Messages | | | | | | | 

The stream list should be visible for all #/inbox routes, regardless of whether the stream is selected or not.

As you can see from the routes, the inbox view is a separate template ( inbox.html ), which is loaded both when a stream is selected and in its absence. This allows Angular to re-render the entire view every time a stream is selected, which also causes the list of streams (on the right) to re-display and lose its scroll position.

I would like the thread list to be redrawn whenever a thread is selected, and I cannot figure out how to organize my routes / patterns to achieve this.

Any suggestions would be greatly appreciated!

Answer 1

Thanks for your suggestions. However, I was able to solve this problem using this technique:

http://www.bennadel.com/blog/2441-Nested-Views-Routing-And-Deep-Linking-With-AngularJS.htm https://github.com/bennadel/AngularJS-Routing

It was a little harder to implement, but for my case, I think it's worth it at the end

Answer 2

Please check issue , I believe your problem is exactly the same.

If you change the url, everything inside the ng-view will be re-rendered, and there is no way to avoid this. However, if you set reloadOnSearch to false in the route configuration, and then use links such as /inbox?id=1 , ng-view will not be displayed again. This is probably the best solution for your problem, you can use deep binding and avoid re-rendering.

Regarding the reloadOnSearch property, the reloadOnSearch document states:

[reloadOnSearch = true] - {boolean =} - reload the route when only Changes $ location.search ().

If the parameter is set to false and the url in the browser, then the $ routeUpdate event is broadcast in the root area.

You just need to listen to the $routeUpdate event to update the information inside the incoming message controller, for example:

 app.controller('InboxCtrl', function($scope, $routeParams) { $scope.$on('$routeUpdate', function(value) { // update the model/$scope here based on the $routeParams info... }); }); 

jsFiddle example: http://jsfiddle.net/bmleite/ZB56n/