$rootScope 更改不反映在模板上

Question

我是 angularjs 的新手。我正在尝试构建一个包含登录页面和仪表板页面的简单应用程序。uild。

现在，当 rootScope 更改时，我在更新 html 模板时遇到问题。

这是我的组件模板：

<!-- show dashboard page app >
<div layout="column">
  <div ng-show="$rootScope.isAuthenticated">
    <pm-header></pm-header>
    <div layout="row">
      <pm-sidebar></pm-sidebar>
      <div layout="column" class="sitecontent" layout-padding>
        <md-content ui-view></md-content>
      </div>
    </div>
  </div>

  <!-- show login page app >
  <div ng-hide="$rootScope.isAuthenticated">
    <pm-homeheader></pm-homeheader>
    <div layout="row">
      <md-content ui-view flex></md-content>
    </div>
  </div>

</div>

登录块代码：

'use strict'

export default ['$rootScope', '$state', '$http', '$window', function($rootScope, $state, $http, $window) {
  this.user = {};

  this.login = () => {
    $http.post('./api/auth/login', this.user)
      .success(function(data, status, headers, config) {
        $window.sessionStorage.token = data.token;

        $rootScope.user = data.user;
        $rootScope.isAuthenticated = true;

        $state.go('home');
      })
      .error(function(data, status, headers, config) {
        delete $window.sessionStorage.token;
      })
  };
}]

我的问题是当我登录并返回主状态时，ui-router 将模板更新为 ui-view，但是 ng-show="$rootScope.isAuthenticated" 没有反映html 上的更改，它显示主页的块代码而不是仪表板页面。

谁能帮我解决这个问题，非常感谢。

Answer 1

在 HTML 上使用变量进行绑定时，您不应使用 $scope 或 $rootScope，因此一旦变量更新$rootScope、isAuthenticated 将在评估 ng-show 的值时取自 $rootScope。

ng-show="isAuthenticated"

虽然直接使用 $rootScope，但这并不是一个好的做法。我建议您创建一个名称为 userService 的 service/factory，它将在 st angular 组件之间共享用户信息。

Answer 2

使用：

ng-show="$root.isAuthenticated"

您无法在模板中访问 $rootScope，当您在控制器中访问它时，您将其注入。$root 之所以有效，是因为当 angular 创建 rootScope 时，它会将对 $root 的引用设置为自身所以它就像访问范围内的任何其他属性一样。

参考AngularJS rootScope代码第135行：https://github.com/angular/angular.js/blob/v1.3.6/src/ng/rootScope.js#L135

$rootScope 更改不反映在模板上

$rootScope changed doesn't reflect on template

angularjs

rootscope