8

我有一个使用 angular.js 的相当简单的待办事项应用程序，我正在使用 ui-router 库。我查看了 github 上的 ui-router 示例（https://github.com/angular-ui/ui-router/tree/master/sample），但无法弄清楚我做错了什么。在我的应用程序中，我有一个侧边栏导航视图（包含待办事项列表）和一个内容视图（单击时显示待办事项的详细信息）。我遇到的问题是，当我导航到 /todo/exampleItem 时，内容视图会更新，并且导航面板也会重新加载。这不会影响应用程序的功能，但我想避免每次单击项目时导航面板闪烁。

这是我处理状态更改的代码：

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 中，我的视图设置如下：

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

有什么方法可以阻止每次单击新项目时重新加载 navPanel 视图？

4

1 回答 1

4

基于该问题的投票答案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'
            }
        }
    })

}]);
于 2013-07-04T21:12:40.223 回答