如何在 Angular 中的 url 更改时仅重新加载一个控制器

How to reload only one controller on url change in Angular?

本文关键字：加载 新加载 控制器 一个 Angular 中的 url      更新时间：2023-09-26

我正在为我的Web应用程序使用ui-router，并且我定义了3个不同的视图：标题，内容和菜单。

当我从菜单中选择一个链接时，我只想重新加载内容视图，页面的其余部分应该保持原样。这是我的路由配置：

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 中，我像这样定义此视图：

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

如何定义我的配置文件以仅重新加载"内容"视图？

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

<div site-header></div>
<div ui-view="content"></div>
<div site-menu></div>
相关文章：