$ rootScope with TypeScript and controllerAs

我正在用Angular 1和Typescript构建一个应用程序。以下是我的登录控制器

module TheHub { 
    /** 
    * Login page controller. 
    */ 
    export class LoginController { 

     static $inject = ['$http', '$rootScope', '$location']; 

     constructor(private $http: ng.IHttpService, private $rootScope, private $location: ng.ILocationService) { 

     } 

     /** 
     * Method to check if the user is logged in 
     */ 
     login(user: {}) { 
      this.$http.post('/login', user).then((value: ng.IHttpPromiseCallbackArg<{}>) => { 
       this.$rootScope.auth = { isAuthenticated: true, isAuthenticationChecked: true }; 
       this.$location.url('/'); 
      }, (error: any) => { 
       this.$rootScope.auth = { isAuthenticated: false, isAuthenticationChecked: true }; 
      }); 
     } 
    } 

    angular.module('TheHub').controller('LoginController', LoginController); 
}

现在我的应用程序以这样一种方式，“应用”是主控制器和“的LoginController”结构正在应用嵌套的控制器。从代码中可以看到，我试图在$ rootScope中更改某些内容，以便在登录过程成功后刷新涉及App的视图。

不知何故，似乎没有任何效果。我检查了它的stackoverflow，发现这个问题。

Define and Access $rootScope with controller as syntax

他们所提出的建议有写抽象出来，我同意，但怎么样的双向数据绑定认证信息的服务？

例如，我在App Controller的视图中有一个菜单，我想在Login Controller成功完成登录过程时显示该菜单。

更新

应用程序控制器：

module TheHub { 
    /** 
    * Root controller. 
    */ 
    export class AppController { 

     static $inject = ['$mdSidenav', '$rootScope']; 

     constructor(private $mdSidenav: angular.material.ISidenavService, private $rootScope) { 
     } 

     /** 
     * Handler for button click to show/hide left menu. 
     */ 
     openLeftMenu =() => { 
      this.$mdSidenav('left').toggle(); 
     } 
    } 

    angular.module('TheHub').controller('AppController', AppController); 
}

查看：

<div id="sideNavContainer" ng-controller="AppController as ctrl" layout="column" ng-cloak layout-fill> 
    <md-toolbar flex="none"> 
     <div class="md-toolbar-tools"> 
      <md-button class="md-icon-button" aria-label="Settings" hide-gt-md ng-click="ctrl.openLeftMenu()"> 
       <i class="material-icons">menu</i> 
      </md-button> 
      The Hub 
      <span flex></span> 
     </div> 
    </md-toolbar> 
    <md-content flex layout="row"> 
     <md-sidenav ng-show="ctrl.auth.isAuthenticated" class="md-sidenav-left" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')" md-disable-backdrop md-whiteframe="4" flex="none"> 
      <md-content layout-padding> 

      </md-content> 
     </md-sidenav> 
     <div ng-view flex="grow"></div> 

    </md-content> 
</div>

来源

2016-03-23 Pavan

没有看到任何App控制器及其视图，很难诊断问题。 –

添加相同。 – Pavan

你的观点会在ctrl.auth的auth对象。所以它期望它是AppController的一个属性。但事实并非如此。这是$rootScope的一个属性。由于每个表达式都在范围上进行评估，并且每个范围都从$ rootScope继承，所有您需要的是

ng-show="auth.isAuthenticated"

来源

2016-03-23 19:46:55

$ rootScope with TypeScript and controllerAs

回答

相关问题