Директива AngularJS с использованием поля ввода TypeScript для форматирования

Question

Я новичок в использовании углового, и мне трудно писать директивы. В частности, я хочу написать тот, который отображает float как процент в представлении. Я хотел бы, чтобы поведение выглядело следующим образом: когда просмотр загружается и данные считываются с контроллера, я хочу, чтобы директива отображала соответствующее свойство 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, и из-за этого мне сложно найти подходящие примеры. Я использую то, что, как мне кажется, называют шаблоном Factory Factory (?). Размытие-событие работает без проблем, однако я изо всех сил пытаюсь вызвать директиву при первом загрузке шаблона. Что я делаю не так?

С уважением Kristofer

Answer 1

Я не думаю, что вы должны использовать размытие и OnLoad функциональность. Угловые получили $ formatters и $ parsers для этого. Посмотрите на documentation.

С помощью форматирования вы можете отформатировать значение модели до определенного текстового текста, который будет использоваться в DOM. И с синтаксическим анализатором вы можете проанализировать значение DOM, чтобы ваш введенный процент был плавающим в вашей модели.

Update ваш метод ссылки на что-то вроде этого:

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