javascript - 如何在 Angular 中更改 url 时仅重新加载一个 Controller ？

Question

我在我的 Web 应用程序中使用 ui-router，并且定义了 3 个不同的 View :标题、内容和菜单。

当我从菜单中选择链接时，我只想重新加载内容 View ，页面的其余部分应保持原样。这是我的路线配置:

app.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', '$httpProvider',
function ($stateProvider, $urlRouterProvider, $locationProvider, $httpProvider) {
    $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
    $locationProvider.html5Mode(true);

    $stateProvider.state('', {
        url: '/name=:name',
        views: {
            header: {
                templateUrl: '/new/app/components/header/headerView.html',
                controller: 'HeaderController'
            },
            content: {
                // only this one should reload itself on url change.
                templateUrl: '/new/app/components/content/contentView.html',
                controller: 'ContentController'
            },
            menu: {
                templateUrl: '/new/app/components/menu/menuView.html',
                controller: 'MenuController'
            }
        }
    });
}
]);

在 html 中，我这样定义了这个 View :

    <div ui-view="header"></div>
    <div ui-view="content"></div>
    <div ui-view="menu"></div>

如何定义我的配置文件以仅重新加载“内容” View ？

Answer 1

我会为您的 header 和 menu 创建指令，或者使用 ng-include 而不是使用 ui-view 或将它们放入您的状态配置中

<div site-header></div>
<div ui-view="content"></div>
<div site-menu></div>