With angular.js using ui-router, how to only reload one view?

Question

I have a fairly simple todo app using angular.js for which I am using the ui-router library. I looked through the ui-router example on github (https://github.com/angular-ui/ui-router/tree/master/sample) but was unable to figure out what I am doing wrong. In my app I have a sidebar navigation view (with the list of things todo) and a content view (which displays the todo item's details when clicked). The problem I have is that when I navigate to /todo/exampleItem the content view updates and the navigation panel is reloaded as well. This doesn't effect the functionality of the app but I would like to avoid the navigation panel flickering each time you click on an item.

Here is my code to handle the state changes:

app.config(function ($stateProvider) { $stateProvider .state('todo', { url: "/todo", views: { "navPanel": { templateUrl: "./navPanel.html", controller: 'PanelController' } } }) .state('todo/:item', { url: "/todo/:item", views: { "PanelView": { templateUrl: "./navPanel.html", controller: 'PanelController' }, "ContentView": { templateUrl: "./content.html", controller: 'ContentController' } } }) });

In my index.html my views are set up as follows:

 <div class="column" data-ui-view="PanelView"></div> <div class="column" data-ui-view="ContentView"></div>

Is there some way I can stop the navPanel view from being reloaded each time a new item is clicked?

Community · Accepted Answer · 2017-05-23 10:28:27Z

4

Based on the voted answer of that question angularjs ui-router - how to build master state which is global across app

app.config(['$stateProvider', function ($stateProvider) { $stateProvider .state('todo', { abstract: true, views: { "navPanel": { templateUrl: "./navPanel.html", controller: 'PanelController' } } }) .state('todo/:item', { url: "/todo/:item", views: { "ContentView@": { templateUrl: "./content.html", controller: 'ContentController' } } }) }]);

edited May 23, 2017 at 10:28

CommunityBot

11 silver badge

answered Jul 4, 2013 at 21:12

Sydney

12.3k21 gold badges94 silver badges146 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

ORL Over a year ago

When I add the abstract true line it makes my navPanel vanish. I think I must be missing something conceptually on how nested views work. I will keep researching and post back when I have a solution. Thanks for you help though!

Sydney Over a year ago

Can you try changing navPanel to PanelView in the abstract state?

ORL Over a year ago

Wow, that was the issue, I can't believe I missed that. Thanks!

Ganbin Over a year ago

I have exactly the same problem. But when I use abstract:true, the console show me an error says : Cannot transition to abstract state 'myState'. How did you achieve to display correctly your grid and only reload the form when choose to edit an item?

Collectives™ on Stack Overflow

With angular.js using ui-router, how to only reload one view?

1 Answer 1

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Linked

Related