$rootScope 与 TypeScript 和 controllerAs

Question

我正在使用 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);
}

现在我的应用程序的结构是 "App" 是主控制器，"LoginController" 是嵌套在应用程序下的控制器。从代码中可以看出，我正在尝试更改 $rootScope 中的某些内容，以便在登录过程成功后可以刷新引用 App 的视图。

不知怎么的，好像一点效果都没有。我检查了它的Whosebug并发现了这个问题。

他们建议编写一个服务来抽象出我同意的身份验证信息，但是双向数据绑定呢？

例如，我在应用程序控制器的视图中有一个菜单，我想在登录控制器成功完成登录过程时显示它。

更新

应用程序控制器：

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>

Answer 1

您的视图在 ctrl.auth 中查找 auth 对象。所以它期望它是 AppController 的属性。但事实并非如此。它是 $rootScope 的一个属性。由于每个表达式都在作用域上求值，并且每个作用域都继承自 $rootScope，所以您只需要

ng-show="auth.isAuthenticated"

$rootScope 与 TypeScript 和 controllerAs

$rootScope with TypeScript and controllerAs

angularjs

typescript

rootscope