$ rootScope已更改,未反映在模板上

Question

我是angularjs的新手.我正在尝试构建一个包含登录页面和dashbboard页面的简单应用程序.

现在,当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路由器更新模板,用户界面视图,但ng-show="$rootScope.isAuthenticated"没有反映在HTML的变化,显示它的主页,而不是信息中心页块码.

很多人都能帮助我解决这个问题.

Answer 1

使用:

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