无法在指令linkFn中获取控制器引用
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了无法在指令linkFn中获取控制器引用相关的知识,希望对你有一定的参考价值。
我正在尝试将angular-unit-converter指令移植到angularjs@1.4.5中的typescript。但是我无法获得angularjs来为require
指令注入控制器。
它抛出
无法读取未定义的属性'$ parsers'
因为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
我究竟做错了什么?
答案
发生这种情况是因为从未定义过require
。它应该是
public require = "ngModel";
代替
public require: "ngModel";
启用TypeScript strictNullChecks
编译器选项可以消除此类错误。
以上是关于无法在指令linkFn中获取控制器引用的主要内容,如果未能解决你的问题,请参考以下文章