Angularjs &引用；这"；使用TypeScript生成的Angular指令中未定义的侧链接函数

我对打字脚本和Angular都是新手，所以我可能在这里犯了一些非常基本的错误

我试图创建一个抽象基类，从中可以派生多个指令，每个指令都将实现一个自定义验证规则。我的代码编译正常，但在运行时失败，特别是当它试图调用this.isValid（…）时，因为此时“this”未定义。有人能看到这个代码有什么问题吗

module App.Common.Directives {
    'use strict';

    export abstract class ValidatorBase implements angular.IDirective {

        require = 'ng-model';
        restrict = 'A';

        constructor(private validationErrorKey: string) { }

        link(scope: angular.IScope, el: angular.IAugmentedJQuery, attributes: Directives.IValidatorAttributes, controller: angular.IFormController) {
            //tsc writes "var _this = this;" here, but this is undefined
            scope.$watch(attributes.ngModel, () => {
                const val: string = el.val();
                const valid = this.isValid(val, el, scope, attributes, controller);
                controller.$setValidity(this.validationErrorKey, valid, undefined);
            });
        }

        abstract isValid(val: any, el?: angular.IAugmentedJQuery, scope?: angular.IScope, attributes?: Directives.IValidatorAttributes, controller?: angular.IFormController): boolean;

    }
}

以下是该类的TypeScript编译器的输出：

var App;
(function (App) {
    var Common;
    (function (Common) {
        var Directives;
        (function (Directives) {
            'use strict';
            var ValidatorBase = (function () {
                function ValidatorBase(validationErrorKey) {
                    this.validationErrorKey = validationErrorKey;
                    this.require = 'ng-model';
                    this.restrict = 'A';
                }
                ValidatorBase.prototype.link = function (scope, el, attributes, controller) {
                    var _this = this; //this is undefined when we get here
                    scope.$watch(attributes.ngModel, function () {
                        var val = el.val();
                        var valid = _this.isValid(val, el, scope, attributes, controller);
                        controller.$setValidity(_this.validationErrorKey, valid, undefined);
                    });
                };
                return ValidatorBase;
            })();
            Directives.ValidatorBase = ValidatorBase;
        })(Directives = Common.Directives || (Common.Directives = {}));
    })(Common = App.Common || (App.Common = {}));
})(App || (App = {}));

//tsc在这里写“var\u this=this；”，但这是未定义的

两个可能的问题：

• 您应该在调试控制台中键入此。这是因为sourcemaps目前的工作方式：

• 您以错误的方式向angular注册指令。请注意，如果像

  .directive（'foo'，foo）

  那样使用foo，angular将不会在

  foo

  上调用new。Angular假设它已经是一个包含所有正确内容的变量。Angular编写时没有考虑类（Angular 1现在已经相当老了）

---

在角度指令中，考虑<代码>这个< /代码>类实例是不安全的，因为函数可以有自己的词法<代码> < < /代码>，它们实际上有它。

此

是

控制器

中的控制器实例（可能会或可能不会以“controller as”语法在作用域中公开）

此

是

编译中的DDO对象（因此
此
是上下文）

此
在链接函数中是
未定义的
（在严格模式下）

如果不确定此

或要覆盖它，请使用箭头函数：

link = (...) => { ... };

---

似乎我完全重复了这个问题：-现在就去尝试这个解决方案。根据另一个问题更改TypeScript中链接方法的语法有效。谢谢你的解释，非常好。这个解决方案正在起作用，但现在我明白了为什么它会起作用。