angularjs - 如何从 TypeScript Controller 中的表单引用属性和方法？

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，使用 SignupCtrl as signup 和 UI Router，我可以像这样在我的 Controller 中引用我的表单:

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

但是，在 TypeScript 中，this 指的是我的类及其自己的变量和方法，除非我弄错了。我如何在我的 TypeScript Controller 中引用表单或任何东西？现在范围如何绑定(bind)到 View ？

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 中，所有 Controller 属性都将位于 vm. 上

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