使用UI路由器angular.js，如何重装只有一个视图？ [英] With angular.js using ui-router, how to only reload one view?

问题描述

我在使用angular.js为此我使用的UI路由器库一个相当简单的待办事项应用程序。 // github上：通过我在GitHub上的用户界面，例如路由器（ HTTPS看去。 COM /角度的UI / UI路由器/树/主/样品），但无法弄清楚什么我做错了。在我的应用我有一个侧边栏导航视图（事情待办事项列表）和内容视图（点击时它显示待办事项的详细信息）。我的问题是，当我浏览到/ TODO / exampleItem内容视图更新和导航面板被重新加载为好。这不会影响应用程序的功能，但我想避免的导航面板中单击某个项目每一次闪烁。

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.

下面是我的code来处理状态变化：

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'
            }
        }
    })

});

在我的index.html我的看法是设置如下：

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>

有一些方法可以让我停止从每一个新项目点击时被重新加载的navPanel看法？

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

推荐答案

根据这个问题<一的投票答案href=\"http://stackoverflow.com/questions/16473952/angularjs-ui-router-how-to-build-master-state-which-is-global-across-app\">angularjs UI路由器 - 如何建立主状态，这是整个应用全球

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'
            }
        }
    })

}]);

这篇关于使用UI路由器angular.js，如何重装只有一个视图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！