重新加载一个不在ngRoute管理下的控制器

Reload a controller not managed by ngRoute on route change

本文关键字：管理 ngRoute 控制器 新加载 加载 一个      更新时间：2023-09-26

我的web应用程序登录过程如下，

。用户单击登录按钮，链接将他们带到http://localhost:3030/login/facebook

b。NodeJS后端接收请求，并使用passport-facebook将浏览器定向到Facebook登录页面。

c。然后Facebook用一些用户数据将用户引导回调。(回调:http://localhost:3030/login/facebook/callback)

d。对于用户数据，存在或将创建一个帐户，并且将创建属于该帐户的令牌(使用JWT)

e。该令牌将通过重定向到http://localhost:3030/#/got_token/the_actual_jwt_string

发送给用户。

f。AngularJS应用程序将使用ngRoute路由，并将令牌保存在localStorage中。

NodeJS中的令牌发行代码，

server.get('/auth/facebook', passport.authenticate('facebook', {session: false}));
server.get('/auth/facebook/callback', passport.authenticate('facebook', {session: false}), function(req, res) {
  var token = jwt.sign(/* issue a token */);
  // put the token into database
  res.header('Location', 'http://localhost:3030/#/got_token/' + token);
  res.send(302);
});

AngularJS中的路由代码，

.when('/got_token/:token*', {
   redirectTo: function(parameters, path, search) {
     localStorage.setItem('ngStorage-token', JSON.stringify({
       token: parameters.token
      }));
     return '/';
    }
 })

这个工作很好，直到我的视图层次结构看起来像这样，

<body ng-controller="NavigationViewController">
  <div ng-view>
  </div>
</body>

控制器代码

controllers.controller('NavigationViewController', ['$scope', '$route', 'token', function($scope, $route, token) {
    var _token = token.retrieve();
    $scope.token = _token;
    $scope.authenticated = (_token != '');
    if ($scope.authenticated) {
      var payload_string = b64utos(_token.split('.')[1]);
      var payload = KJUR.jws.JWS.readSafeJSONString(payload_string);
      $scope.displayName = payload.facebookDisplayName;
    } else {
      $scope.displayName = 'no';
    }
    $scope.logout = function() {
      token.clear();
    };
}]);

由ngRoute完成的路由不会重新创建我的NavigationViewController，使_token变量设置为先前的状态。

我需要一种方法让NavigationViewController知道令牌已经更改，因为它不涉及路由

我想给你提两个建议。这里有两个。(1)。您可以将$watch添加到令牌中，以便无论何时更改它都会自动反映。(2)。将令牌分配到rootscope中，并在令牌更改时更新它。

如果你需要的话，我也可以给你一些例子。

问候,Mahendra

看起来您需要在控制器之间传递数据。这里有一种方法。在NavigationViewController中监听changed和emit中的事件，当它发生变化时。绑定到rootScope 

angular.module('app', [])
.controller('LoginCtrl', function ($scope, $rootScope) {
    $scope.changeToken = function () {
        $rootScope.$emit('changed', +new Date());
    }
})
.controller('NavigationViewController', function ($scope, $rootScope) {
    $scope.token = null;
    $rootScope.$on('changed', function(event, token) {
        $scope.token = token;
    });
})

最后，使用了一个简单的解决方案——事件。

我的问题的标题表明，我想重新加载一个嵌套的父视图控制器在路由改变。由于嵌套层次结构的父级不是由ngRoute管理的，因此它不会自动进行管理。然而，ngRoute有一个服务($route)发出事件，这是最简单的答案。

基本上，我把所有的初始化代码放在一个函数中，并在事件发生时调用该函数。

controllers.controller('NavigationViewController', ['$scope', '$route', '$location', 'token', function($scope, $route, $location, token) {
    var updateNavigationBar = function() {
      var _token = token.retrieve();
      $scope.token = _token;
      $scope.authenticated = (_token != '');
      if ($scope.authenticated) {
        var payload_string = b64utos(_token.split('.')[1]);
        var payload = KJUR.jws.JWS.readSafeJSONString(payload_string);
        $scope.displayName = payload.facebookDisplayName;
      } else {
        $scope.displayName = 'no';
      }
    };
    $scope.$on('$routeChangeSuccess', function(event, current, previous) {
      if ($location.path() == '/events') {
        updateNavigationBar();
      }
    });
    updateNavigationBar();
}]);
相关文章：