在Typescript 1.4中的AppGyver和Angular Controllers

dan*_*bon 5 angularjs typescript1.4 appgyver supersonic

我在AppGyver中遇到了角度控制器的问题,因为从不调用构造函数.我正在使用angular中的"controller as"语法,我不知道AppGyver是否支持它,因为我所看到的所有文档都是"$ scope sintax".这是我的控制器:

interface ILoginControllerScope extends ng.IScope {
    vm: LoginController;
}

interface ILoginController {
    Login(): any;
}

class LoginController implements ILoginController {
    static $inject: any = ['$scope', 'supersonic', 'steroids'];
    constructor(private $scope: ILoginControllerScope, private supersonic: any, private steroids: any) {
        this.supersonic.logger.log('This should be called');
        $scope.vm = this;

    }
    Login(): any {
    }
    static controllerId(): string {
        return 'loginController';
    }
 }

appUsers.controller(LoginController.controllerId(), LoginController);
Run Code Online (Sandbox Code Playgroud)

这是我的观点:

<div ng-controller="loginController as vm" class="padding">
   <div>

   </div>
    <div ng-hide="addonsUndefined">
        <h1 class="center">Caredfor</h1>
        <div class="center">
            <img class="logoSize" src="/images/logo.png">
        </div>

        <div>
           <button class="button button-block button-positive icon-left super-social-facebook" ng-click="vm.Login()">Sign in with Facebook</button>
        </div>
    </div>
</div>
Run Code Online (Sandbox Code Playgroud)

编辑1 JS生成:

var LoginController = (function () {

    function LoginController($scope, supersonic) {
        this.supersonic = supersonic;
        supersonic.logger.log('This should be called');
        $scope.vm = this;

    LoginController.controllerId = function () {
        return 'loginController';
    };

    LoginController.prototype.Login = function () {
    };
    return LoginController;
})();

appUsers.controller(LoginController.controllerId(), LoginController);
Run Code Online (Sandbox Code Playgroud)

Raj*_*oel 0

看起来大部分都不错。这里有一些可以尝试的事情:

  1. 在浏览器中按 F12,然后转到“控制台”选项卡,查看 Angular 是否有任何错误。

  2. 而不是这个:

    static $inject: any = ['$scope', 'supersonic', 'steroids'];
    constructor(private $scope: ILoginControllerScope, private supersonic: any, private steroids: any) {
        this.supersonic.logger.log('This should be called');
        $scope.vm = this;
    }
    
    Run Code Online (Sandbox Code Playgroud)

尝试这个:

    constructor() {
        var i:number = 7;
    }
Run Code Online (Sandbox Code Playgroud)

在浏览器中,在该行上放置一个断点,看看它是否被击中。如果是这样,那么一次一个,将构造函数参数放回原处,看看是什么导致了它的破坏。我怀疑您的 ILoginControllerScope 参数导致了问题,因为依赖项注入不知道如何实例化其中之一。在我看来,你并不真正需要它,你可以使用普通的 ng.IScope 来代替。ILoginControllerScope 没有添加任何值。为什么需要一个单独的类来存储对控制器的引用?