angularjs - 无法在指令 linkFn 中获取 Controller 引用

Question

我正在尝试移植 angular-unit-converter angularjs@1.4.5 中的 typescript 指令。但是我无法让 angularjs 为 require 指令注入(inject) Controller 。

它抛出

Cannot read property '$parsers' of undefined

因为 ngModel 是 undefined。

这是我的尝试

// typescript conversion of https://github.com/alexandernst/angular-unit-converter
import { Decimal } from "decimal.js";
import { IDirective, IDirectiveFactory, IDirectiveLinkFn, IScope, INgModelController, IAttributes, IAugmentedJQuery } from "angular";

interface IUnitConverterScope extends IScope {
    [key: string]: any;
    convertFrom;
    convertTo;
}

export class UnitConverterDirective implements IDirective<IUnitConverterScope> {
    public link;
    public restrict = "A";
    public require: "ngModel";
    public template = "";
    public scope = {
        convertFrom: "@",
        convertTo: "@"
    };

    constructor() {
        // It's important to add `link` to the prototype or you will end up with state issues.
        // See http://blog.aaronholmes.net/writing-angularjs-directives-as-typescript-classes/#comment-2111298002 for more information.
        this.link = this._link.bind(this);
    }

    public static Factory(): IDirectiveFactory<IUnitConverterScope> {
        const directive = (/*list of dependencies*/) => {
            return new UnitConverterDirective(/*list of dependencies*/);
        };

        directive["$inject"] = [];

        return directive;
    }

    private _link(scope: IUnitConverterScope, element: IAugmentedJQuery, attrs: IAttributes, ngModel: INgModelController) {
        console.log(ngModel);
        Decimal.config({
            precision: 10
        });

        const units = {
            // Size/distance
            "mm": 0.001,
            "cm": 0.01,
            "m": 1,
            "km": 1000,
            "in": 0.0254,
            "ft": 0.3048,
            "yd": 0.9144,
            "mi": 1609.344,

            // Weight
            "mg": 0.001,
            "g": 1,
            "kg": 1000,
            "oz": 28.3495231,
            "lb": 453.59237
        };

        scope.do_convertFrom = (value) => {
            if (!scope.convertFrom || scope.convertFrom === "") { return value; }

            let from = new Decimal(units[scope.convertFrom]);
            let to = new Decimal(units[scope.convertTo]);
            return (new Decimal(value).dividedBy(from.dividedBy(to))).toNumber();
        };

        scope.do_convertTo = (value) => {
            if (!scope.convertTo || scope.convertTo === "") { return value; }

            let from = new Decimal(units[scope.convertFrom]);
            let to = new Decimal(units[scope.convertTo]);
            return (new Decimal(value).times(from.dividedBy(to))).toNumber();
        };

        let p = (viewValue) => {
            let m = viewValue.match(/^\-?\d+((\.|\,)\d+)?$/g);
            if (m !== null) {
                return scope.do_convertFrom(parseFloat(viewValue));
            }
        };
        let f = (modelValue) => {
            return scope.do_convertTo(parseFloat(modelValue));
        };

        ngModel.$parsers.push(p);
        ngModel.$formatters.push(f);

        scope.$watch("[convertFrom, convertTo]", () => {
            ngModel.$modelValue = "";
        });
    }
}

可以看到直播DEMO (打开控制台可以看到错误)

如果我只写纯 JS 就可以了 -> http://plnkr.co/edit/inuTNJ5OGhPHWmD09WWD?p=preview

我做错了什么？

Answer 1

发生这种情况是因为从未定义require。应该是

public require = "ngModel";

代替

public require: "ngModel";

可以通过启用 TypeScript strictNullChecks 编译器选项来消除此类错误。