仅数字输入的自定义指令不适用于控制器绑定的div内的HTML

Question

我正在为AngularJS JavaScript的仅数字输入搜索自定义指令，并获得了一个有效的指令，但是当我将其用于绑定到控制器的body或div中的输入框时，该指令不起作用。

HTML：

<div ng-app="app" ng-controller="xyz">
  <p>Demo of AngularJS Numbers Only Directive</p>
  <p>Input below will accept only numbers.</p>
  <p><input type="text" ng-model="val" numbers-only  /></p>
</div>

脚本：

var app = angular.module('app', []);
app.directive('numbersOnly', function () {
    return {
        require: 'ngModel',
        link: function (scope, element, attr, ngModelCtrl) {
            function fromUser(text) {
                if (text) {
                    var transformedInput = text.replace(/[^0-9]/g, '');

                    if (transformedInput !== text) {
                        ngModelCtrl.$setViewValue(transformedInput);
                        ngModelCtrl.$render();
                    }
                    return transformedInput;
                }
                return undefined;
            }            
            ngModelCtrl.$parsers.push(fromUser);
        }
    };
});

JSFiddle： 单击此处

如果我从div中删除了控制器部分，它将正常工作。

Answer 1

它不起作用，因为未定义您的控制器，从而引发错误，也破坏了角度指令。

只需在JS中定义控制器：

app.controller('xyz', function() {return {};})

它应该可以工作（ 更新了JSFiddle ）

Answer 2

您有一个未定义的控制器，将其删除将对其进行修复：

http://jsfiddle.net/kgp0z2y9/3/

或创建它

app.controller('xyz', function(){});

http://jsfiddle.net/kgp0z2y9/5/