Question

我有一个简单的问题，我还没有找到答案。

在常规的Angular JavaScript中，如果我有这样一个表单的开头：

<form novalidate action="" class="signupForm" name="signup.form">
    <div class="row">
        <div class="col-md-12 ">
            <fieldset>
                <input type="text" name="fullName" placeholder="Full Name" ng-model="signup.fullName" required />{{signup.fullName}}
                <div ng-show="signup.form.$submitted || signup.form.$touched">
                    <span ng-show="signup.form.$error.required">Please enter your full name.</span>
                </div>
            </fieldset>
        </div>
    </div>

使用controllerAs，例如，使用带有UI路由器的SignupCtrl as signup，我可以在我的控制器中引用我的表单，如下所示：

.controller(function() {
     this.form // shows me my form
 });

但是，在TypeScript中，this引用了我的类及其自己的变量和方法，除非我弄错了。如何在TypeScript控制器中引用表单或任何内容？范围如何绑定到视图？

export class SignupCtrl implements ISignupCredentials {                     

        constructor(protected $http: ng.IHttpService, 
                    protected $q: ng.IQService,
                    protected $scope: IScope) {                                                

            console.log(this.form); // undefined because form doesn't exist in my controller class                                    
        }


    }

Answer 1

我们这样做：

function myDirective(): ng.IDirective
{
    return {
        restrict: "E",
        templateUrl: 'template.html',
        controller: 'MyController',
        scope:
        {
        },
        link: (scope, element, attrs, controller: MyController) =>
        {
            scope.vm = controller;
        }
    };
}

angular.module('mod').directive("mydirective", myDirective);

export class MyController
{
    public ImOnHTML: string = "helloWorld";

    static $inject = [];
    constructor()
    {

    }
}

angular.module('mod').controller('MyController', MyController);

然后在template.html中，所有控制器属性都将在vm.

上

所以： <input ng-model="vm.ImOnHTML"/>

Answer 2

实际上，我认为你所做的非常接近。

如您所知，当您将<form>命名为“signup.form”并且您使用“控制器为”语法时，Angular会将您对表单的引用添加到控制器中，以便可以引用它作为“signup.form”。 [1]

使用TypeScript不会改变这一点。但是为了让编译器满意，你必须在你的类中添加适当的属性。在这种情况下，“形式”：

export class SignupCtrl implements ISignupCredentials {                     
    form: any;

    constructor(protected $http: ng.IHttpService, 
                protected $q: ng.IQService,
                protected $scope: IScope) {

    }
}

此外，this.form将为undefined，直到Angular设置其值，当您的constructor()方法执行时，该值仍未发生。

如何在TypeScript控制器中引用表单中的属性和方法？

2 个答案: