从 Angular js 升级到 Angular 8 的指令

Posted 2023-02-22

【中文标题】从 Angular js 升级到 Angular 8 的指令

【英文标题】：Upgrade directive from angular js to angular 8

【发布时间】：2020-04-01 15:38:33

【问题描述】：

有人可以帮助将此指令升级为 angular 2+

我喜欢这个指令，因为让我只验证浮动，也可以复制粘贴数据或将数据放入其中

var myApp = angular.module('myApp', ['ngStorage']);
myApp.controller('MyCtrl', ['$scope', function($scope) 

]).directive('floatOnly', function() 
  return 
    require: 'ngModel',
    restrict: 'A',
    link: function(scope, element, attrs, modelCtrl) 
      modelCtrl.$parsers.push(function(inputValue) 
        if (inputValue === undefined) return '';

        // Remove forbidden characters
        cleanInputValue = inputValue.replace(',', '.') // change commas to dots
          .replace(/[^\d.]/g, '') // keep numbers and dots
          .replace(/\./, "x") // change the first dot in X
          .replace(/\./g, "") // remove all dots
          .replace(/x/, "."); // change X to dot
        if (cleanInputValue != inputValue) 
          modelCtrl.$setViewValue(cleanInputValue);
          modelCtrl.$render();
        
        return cleanInputValue;
      );
    
  
);

jsfiddle example

【参考方案1】：

试试这个： WORKING DEMO

import  Directive, Renderer2, ElementRef, HostListener  from '@angular/core';

@Directive(
  selector: '[float-only]'
)
export class FloatOnlyDirective
  constructor(private elem: ElementRef, private render: Renderer2)   
  @HostListener('input')
  onChange() 
    let value = this.elem.nativeElement.value.replace(',', '.') 
          .replace(/[^\d.]/g, '') // keep numbers and dots
          .replace(/\./, "x") // change the first dot in X
          .replace(/\./g, "") // remove all dots
          .replace(/x/, ".") ;
    this.elem.nativeElement.value = value;
  

您也可以使用Renderer2 更新innerhtml。这样会更干净，

祝您的 Angular 之旅万事如意！！