Question

我有一个Angular应用程序，它依赖于Angular ui-router。此应用程序有多个页面，共享一个通用模板，如导航栏：

var app = angular.module('app', ['ngSanitize', 'ngResource', 'ngRoute', 'ui.router'])
    .config(['$urlRouterProvider', '$stateProvider', ($urlRouterProvider, $stateProvider) => {
        $urlRouterProvider.otherwise("/index");

        $stateProvider
            .state('index', {
                url: "/index",
                views: {
                    'navbar': {
                        templateUrl: 'Views/Partials/navbar.cshtml',
                        controller: 'App.Controllers.NavbarController'
                    },
                    'content': {
                        templateUrl: 'Views/index.cshtml',
                        controller: 'App.Controllers.IndexController'
                    }
                }
            })
            .state('settings', {
                url: "/settings",
                views: {
                    'navbar': {
                        templateUrl: 'Views/Partials/navbar.cshtml',
                        controller: 'App.Controllers.NavbarController'
                    },
                    'content': {
                        templateUrl: 'Views/settings.cshtml',
                        controller: 'App.Controllers.SettingsController'
                    }
                }
            });
    }]);

'/index'和'/settings'共享相同的模板'Views/Partials/navbar.cshtml'。经过测试，我发现，每次为网址加载“页面”时，都会重新加载其中的所有视图。

是否可以避免重新加载导航栏（如果之前已经加载过导航栏？）

Answer 1

您应该能够将导航栏提取到现有状态的父状态。这样，导航栏仅在输入父状态时加载，并且您应该能够更改共享此父级的子状态而不会影响它。

虽然有更好的方法可以做到这一点，但我的快速和肮脏的方法是将您拥有的状态重命名为 withnav.index 和 withnav.settings 。然后从中删除导航栏视图并添加以下状态。

$stateProvider
    .state('withnav', {
        abstract: true,
        views: {
            'navbar': {
                templateUrl: 'Views/Partials/navbar.cshtml',
                controller: 'App.Controllers.NavbarController'
            }
        }
    });

停止重新加载公共模板

1 个答案: