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

I have the following bit of code for my navigation that I want to update dynamically between pages.

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

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

Here is my app and routing set up

这是我的应用和路由设置

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'
        })
});

In my main controller I set the menuPath value here:

在我的主控制器中,我在这里设置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();

});

When the page switches to the census view it should change the menu. What happens though is the first page loads the main menu, then no matter what other page you go to the menu never updates.

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

1 个解决方案

#1

I imagine this problem has something to do with a primitive values and prototypical inheritance between child scopes, but would need to see more of your html to determine that. Without that, I propose an alternative way that may solve your problem and keep the config all in one place.

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

$routeProvider will accept variables and keep them on the route, even if angular doesn't use them. so we modify your routing by including the menuPath like so:

$ 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'
        })
});

Remove setting $scope.menuPath from each controller, then finally add a watch on rootScope that will change the menuPath on $routeChangeSuccess

从每个控制器中删除设置$ 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 = '';
        }
    });
}]);

#1