Question

我的导航代码有以下几点，我想在页面之间动态更新。

<nav ng-include="menuPath"></nav>

这是我的应用和路由设置

var rxApp = angular.module('ehrxApp', ['ngRoute']);

// configure our routes
rxApp.config(function ($routeProvider) {
    $routeProvider
        .when('/', {
            controller: 'mainController',
            templateUrl: '/content/views/index.html'
        })
        .when('/census', {
            templateUrl: '/content/views/admission/census.html',
            controller: 'censusController'
        })
        .when('/messages', {
            templateUrl: '/content/views/account/messages.html',
            controller: 'messagesController'
        })
        .when('/profile', {
            templateUrl: '/content/views/account/profile.html',
            controller: 'profileController'
        })
});

在我的主控制器中，我在这里设置了menuPath值：

rxApp.controller('mainController', function (userService, $scope, $http) {
    evaluate_size();

    $scope.menuPath = "/content/views/index.menu.html";
});

rxApp.controller('censusController', function ($scope, $http, $sce, censusService) {
    $scope.menuPath = "/content/views/admission/census.menu.html";
    evaluate_size();

});

当页面切换到人口普查视图时，应该更改菜单。但是，第一页加载主菜单会发生什么，然后无论您进入菜单的其他页面是什么都不会更新。

Answer 1

我认为这个问题与原始值和子范围之间的原型继承有关，但需要查看更多的html来确定。如果没有这个，我提出了一种可以解决问题的替代方法，并将配置保存在一个地方。

$ routeProvider将接受变量并将它们保留在路线上，即使angular不使用它们也是如此。所以我们通过包含menuPath来修改您的路由：

var rxApp = angular.module('ehrxApp', ['ngRoute']);

// configure our routes
rxApp.config(function ($routeProvider) {
    $routeProvider
        .when('/', {
            controller: 'mainController',
            templateUrl: '/content/views/index.html',
            menuPath: '/content/views/index.menu.html'
        })
        .when('/census', {
            templateUrl: '/content/views/admission/census.html',
            controller: 'censusController',
            menuPath: '/content/views/admission/census.menu.html'
        })
        .when('/messages', {
            templateUrl: '/content/views/account/messages.html',
            controller: 'messagesController'
        })
        .when('/profile', {
            templateUrl: '/content/views/account/profile.html',
            controller: 'profileController'
        })
});

从每个控制器中删除设置$ scope.menuPath，然后最后在rootScope上添加一个监视器，它将更改$ routeChangeSuccess上的menuPath

rxApp.run(['$rootScope', function ($rootScope) {
    $rootScope.$on('$routeChangeSuccess', function(event, current) {
        if (current && current.$$route && current.$$route.menuPath) {
            $rootScope.menuPath = current.$$route.menuPath;
        } else {
            $rootScope.menuPath = '';
        }
    });
}]);

在控制器之间动态切换ng-include

1 个答案: