Question

我每次路线改变时都试图更新我的导航栏，我试过这个，但它似乎没有用。它应该在每次视图更改时写入bob，但它只在控制器加载时写入它。

nav.controller.js

angular.module('app')
.controller('navController', ['$scope', '$state', function ($scope, $state) {
    var timeSpan;
    $scope.user;

    ...

    //  Update when the view changes.
    $scope.reload = function () {
        $state.reload();
    };
    $scope.$state = $state;
    $scope.$watch('$state.$current.locals.globals.view', function () {
        console.log('bob');
        $scope.user = userService.get();
    });

    ...

    $scope.reroute = function(route){
        $state.go(route);
    };
}]);

route.js

angular.module('SimPlannerApp')
.config(function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.when('/','/signin');

    $stateProvider
        .state('signin', {
            url: "/signin",
            templateUrl: 'views/signin.html',
            controller: 'signinController'
        })
        .state('menu', {
            url: "/menu",
            templateUrl: 'views/menu.html',
            controller: 'menuController',
            resolve: {
                config: function (configService) {
                    return configService.getConfig()
                        .then(function(response){
                            return response.data;
                        })
                        .catch(function(error){
                            console.log('Error : ', error);
                            return undefined;
                        });
                }
            }
        })
        .state('view', {
            url: '/view/:view',
            templateUrl: 'views/view.html',
            controller: 'viewController',
            resolve: {
                view: function ($stateParams, configService) {
                    return configService.getConfig()
                        .then(function(response){
                            var config = response.data;
                            for (var i = 0; i < config.views.length; i++) {
                                if (config.views[i].route === $stateParams.view) {
                                    return config.views[i];
                                }

                            }

                            return undefined;
                        })
                        .catch(function(error){
                            console.log('Error : ', error);
                            return undefined;
                        });
                },
                config: function (configService) {
                    return configService.getConfig()
                        .then(function(response){
                            return response.data;
                        })
                        .catch(function(error){
                            console.log('Error : ', error);
                            return undefined;
                        });
                }
            }
        })
        .state('404', {
            url: '{path:.*}',
            templateUrl: 'views/404.html',
            controller: 'errorController'
        });
});

PS：
应该提到我正在使用AngularJS和ui-router。

Answer 1

不确定我是否完全理解，但使用$stateChangeSuccess来检测路线何时发生变化不是更好吗？我在.run块

中使用它

$rootScope.$on('$stateChangeSuccess', 
function(event, toState, toParams, fromState, fromParams){ ... })

但你可以把它放在你的控制器

中

https://github.com/angular-ui/ui-router/wiki

Answer 2

您可以使用$locationChangeStart处理，如下所示：

$rootScope.$on('$locationChangeStart', function () {
    console.log('bob');       
});

您应该在.module.run()函数中写下这个。

 angular
   .module()
   .run(function($rootScope) {
      // to Here
   })

AngularJS：视图不会更新

2 个答案: