angular $ locationChangeStart没有被正确调用,怎么办?

时间:2014-01-08 13:03:03

标签: javascript node.js angularjs pug

我正在开发一个基于Brian Ford在GitHub上的角度快速博客应用程序的MEAN应用程序。

我遇到的问题是我需要能够在$ locationChangeStart上调用我的UserService服务,以检查是否有用户登录。我看到的大多数示例都让您在模块声明中设置$rootScope.$on('$locationChangeStart'...。这不允许我访问我的自定义服务,所以我的解决方案是将它放在控制器中并在我的主布局文件中调用它。

我已经设置了它,但应用程序什么也没做。它甚至没有调用错误。您是否可以通过此代码发现问题?

这是我的github repo.

LayoutCtrl.js:

angular.module('myApp').
    controller('LayoutCtrl', function($scope, $http, UserService) {
        $scope.$on( "$locationChangeStart", function(event, next, current) {
            if ( UserService.getUser() === null ) {
        // no logged user, we should be going to #login
                if ( next.templateUrl == "partials/login.html" ) {
          // already going to #login, no redirect needed
                } else {
          // not going to #login, we should redirect now
                $location.path( "/login" );
                }
            }         
        });
    });

Layout.jade:

doctype html
html(ng-app="myApp", ng-controller='LayoutCtrl')
  head
    meta(charset='utf8')
    base(href='/')
    title Angular Express Seed App
    link(rel='stylesheet', href='/css/app.css')
  body
    block body

和UserService.js:

angular.module('myApp').
    service('UserService', function(){
        var $scope = this;
        var user = null;
        $scope.user = {};

        $scope.setUser = function(data){
                user = data;
        };
        $scope.getUser = function(){
                $scope.user = user;
        };

        return $scope;
  });

1 个答案:

答案 0 :(得分:4)

我不明白你的服务应该如何工作,你的getUser函数什么都不返回(未定义)。

请改用:

angular.module('myApp').
    service('UserService', function(){
        var user;

        this.setUser = function(data){
          user = data;
        };
        this.getUser = function(){
          return user;
        };
  });

所以你的问题就是undefiend!== null

你要检查这个:

 if ( UserService.getUser() === null )

如果你想检查它是否未定义(或其他假值),请使用:

 if ( ! UserService.getUser() )

你也应该注入$ location:

 controller('LayoutCtrl', function($scope, UserService, $location) {

调试

  • 使用console.log检查应用程序的流程
  • console.log(UserService.getUser()) # undefined

带有运行块的替代解决方案:

angular.module('myApp').
    run(function($rootScope, UserService, $location) {
        $rootScope.$on( "$locationChangeStart", function(event, next, current) {

        });
    });