如何在自定义属性指令中获取具有数字类型的输入值

Question

这是我目前在 IE 11 中实现和工作的内容，现在我们正试图摆脱 IE11 并修复一些弹出的问题。

 <input type="number" evaluate-input="model.personalNumber" ng-model="model.personalNumber" maxlength="50" ng-change="..." ng-blur="..." />

angular.module("myApp")
    .directive("evaluateInput", [
        function () {
            return {
                restrict: "A",
                replace: true,
                scope: {
                    evaluateInput: "="
                },
                link: function ($scope, elem, attrs, ctrl) {

                    /* Need to grab the input from the element because if the input is a number type and it has non-numeric values then the model will be empty. */
                    var inputValue;

                   
                    elem.bind("keyup", function (e) {

                        inputValue = elem[0].value;

                        if (e.keyCode === 13) {
                            $scope.$apply(function () {
                                calculateFormula();
                            });
                        }
                    })

                    elem.bind("blur change", function (e) {

                        inputValue = elem[0].value;

                        $scope.$apply(function () {
                            calculateFormula();
                        });

                    })

                    /* Uses the javascript eval function but catches and swallows any errors and returns null */
                    function calculateFormula() {

                        var result = null;

                        try {
                            result = eval(inputValue);

                            result = Number(result.toFixed(2));
                        }
                        catch (e) {
                            // No need to generate an error on invalid input.
                            // Just leave the result as null
                        }

                        $scope.ngModel = result;
                    }

                }
            };

        }]);

它的工作方式是您可以在输入中键入像 100*2 这样的表达式，它会计算表达式并返回结果。在 Edge 或 Chrome 中运行时，elem[0].value 没有设置值。

我尝试使用其他方法获取值，例如 elem.val() 和 attr.evaluateInput，但这些方法要么返回 null，要么返回模型名称。当这个指令被命中时，好像还没有设置 ng-model。

任何正确方向的帮助或信息将不胜感激。

Answer 1

您的主要问题在于 HTML5 约束验证。

正如AngularJS documentation 中提到的：

如果输入的不是数字，浏览器会报 value 为空字符串，表示视图/模型中的值 ngModel 和随后的范围值也将是一个空字符串。

要解决这个问题，您必须将 input 设置为 text 输入。

我已经修复了这个问题以及以下示例中的其他一些小错误

const app = angular.module("myApp", []);

app.controller('TestCtrl', function() {

  const ctrl = this;

  ctrl.personalNumber = 2;
})

app.directive("evaluateInput", [
  function() {
    return {
      restrict: "A",
      scope: {
        ngModel: '='
      },
      link: function($scope, elem, attrs, ctrl) {

        /* Need to grab the input from the element because if the input is a number type and it has non-numeric values then the model will be empty. */
        var inputValue;

        elem.bind("keyup", function(e) {
          inputValue = elem[0].value;

          if (e.keyCode === 13) {
            calculateFormula();
          }
        })

        elem.bind("blur change", function(e) {

          inputValue = elem[0].value;

          calculateFormula();

        })

        /* Uses the javascript eval function but catches and swallows any errors and returns null */
        function calculateFormula() {

          var result = null;

          try {
            result = eval(inputValue);

            result = Number(result.toFixed(2));
          } catch (e) {
            // No need to generate an error on invalid input.
            // Just leave the result as null
          }

          $scope.ngModel = result;
        }

      }
    };

  }
]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="TestCtrl as model">

    <input type="text" evaluate-input ng-model="model.personalNumber" maxlength="50" />

    <div>
      {{model.personalNumber}}
    </div>

  </div>
</div>