Question

我很擅长使用角色，而且我很难写出指令。特别是我希望编写一个在视图中以浮动百分比显示的窗口。我希望行为如下：当视图加载并从控制器读取数据时，我希望指令以百分比形式显示相应的float属性（即0.25 - > 25％）。当用户在输入字段中输入整数时，我希望它在模糊事件上显示为百分比（即10-> 10％）。到目前为止，这是我的代码：

restrict = "A";
require = "ngModel";
scope = {
    ngModel: "="
}

constructor( /* list of dependencies */) {

}

link = (scope: ng.IScope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes, ngModel: ng.INgModelController /*ctrl: any*/): void => {
    // handle linking requirements (?)   
    element.on("onload", (): void => {
        var modelValue = ngModel.$modelValue;
        var viewValue = this.toViewValue(modelValue);
        ngModel.$setViewValue(viewValue);
        ngModel.$render();
    });
    element.on("blur", (): void => { // lambda to handle this-scope
        var viewValue = ngModel.$viewValue;
        viewValue = this.toViewValue(viewValue);
        ngModel.$setViewValue(viewValue);
        ngModel.$render();       
    });
}

private toModelValue(val: string): number {
    return 0;
}

private toViewValue(val: string): string {
    var str = val.replace("%","").trim();

    if (this.isInteger(str)) {
        var i = parseInt(str);
        if (i >= 100) {
            str = "100";
        } 
    } else if (this.isFloat(str)) {
        var f = parseFloat(str);
        str = (f * 100).toString();
    }
    return str + "%";
}

private isInteger(val: any): boolean {
    return val.match(/^[0-9]{1,3}$/);            
}

private isFloat(val: any): boolean {      
    return val.match(/^\d(\.\d{1,2})?$/);
}

这里是输入字段，我将我的指令应用于：

<div class="form-group">
    <label for="payment-interest-rate" class="col-sm-4 control-label"></label>
    <div class="col-sm-8">
        <input type="text" class="form-control" data-percent id="payment-interest-rate" name="paymentInterestRate" data-ng-model="ctrl.economicInfo.paymentInterestRate"
               data-ng-model-options="{updateOn: 'blur'}">
    </div>
</div>

以下是我如何在我的模块中注册它：

.directive("percent", MyApp.Core.Directives.DisplayPercentageDirective.create)

你可以看到我使用的是TypeScript，因此我在查找相关示例时遇到了一些困难。我使用我认为的指令工厂模式（？）模糊事件没有问题，但是我很难在模板首次加载时触发指令。我做错了什么？

关心Kristofer

Answer 1

我认为你不应该使用模糊和上传功能。 Angular得到了$ formatters和$ parsers。查看documentation。

使用格式化程序，您可以将模型值格式化为将在DOM中使用的特定显示文本。使用解析器，您可以解析DOM的值，以便输入的百分比将成为模型中的浮点数。

更新您的链接方法，如下所示：

ngModel.$formatters.push(toViewValue);
ngModel.$parsers.push(toModelValue);

AngularJS指令使用TypeScript格式化输入字段

1 个答案: