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

admin管理员组

文章数量:1328953

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 () 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?

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./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?

• javascript
• angularjs

Share Improve this question Follow edited Apr 2, 2016 at 16:15 Zanon 30.8k2121 gold badges118118 silver badges126126 bronze badges asked Jul 4, 2013 at 18:56 ORLORL 61822 gold badges1010 silver badges2222 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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'
            }
        }
    })

}]);

本文标签： javascriptWith angularjs using uirouterhow to only reload one viewStack Overflow