Question

我是TypeScript和Angular的相对新手，所以我可能在这里做了一些非常基本的错误。

我试图创建一个抽象基类，我可以从中派生出多个指令，每个指令都会实现一个自定义验证规则。我的代码编译好了，但在运行时失败，特别是当它试图调用this.isValid（...）因为＆＃34;这个＆＃34;在那一点上是不确定的。任何人都可以看到这段代码有什么问题吗？

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 = {}));

Answer 1

在Angular指令中，考虑this一个类实例是不安全的，因为函数可以有自己的词法this，并且它们实际上有它。

this是controller中的控制器实例（可能会也可能不会在＆＃39;控制器作为＆＃39;语法的范围内公开）。

this是compile中的DDO对象（因此this是上下文的。）

this在链接函数中是undefined（在严格模式下）。

如果您不确定词汇this或想要覆盖它，请使用箭头功能：

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

Answer 2

// tsc写＆＃34; var _this = this;＆＃34;在这里，但这是未定义的

两个可能的问题：

您应该在调试控制台中键入_this。这是因为源图表目前的工作方式为：Chrome Typescript debugging references wrong 'this'
您正在以错误的方式注册带有角度的指令。请注意，如果像foo一样使用foo，则角度不会在.directive('foo',foo)上调用 new 。 Angular假设它已经是一个变量，它具有所有正确的东西。 Angular不是用类写的（角度1现在相当老）。

＆＃34;这＆＃34;在使用TypeScript构建的Angular指令中的侧链接函数中未定义

2 个答案: