Question

说我有这个HTML：

<input class="input-date" type="text" placeholder="DD.MM.YY" ng-model="hctrl.dateInput">

当用户输入我希望在适当位置自动插入.的日期时。

我尝试用这样的$watch来解决这个问题：

.controller('homeController', ['$scope', function($scope){
        var controller = this;
        controller.pageClass = 'page-home'
        controller.dateInput = '';

        $scope.$watch(angular.bind(this, function() {
            return this.dateInput;
        }), function(newVal, oldVal){

            var str = newVal.replace(/[.]/g, "");

            console.log('oldVal: ' + oldVal + ' newVal: ' + newVal + ' str: ' + str);

            if(str.length % 2 == 0 && str.length >= 2 && str.length <= 6) {
                console.log(str.length); 
                controller.dateInput += '.';
            }    
        });

    }])

但由于我在controller.dateInput内加入$watch，这会导致无限循环。

解决这个问题的正确方法是什么？

Answer 1

正如Wawy所说，你应该使用一个指令。如果你不想选择具有Mask指令的angular-ui，你可以自己滚动。这里有一些代码可以帮助您入门。

myApp.directive("dateFormat", function() {
            var directive = {};

            directive.restrict = 'A'; // only as attribute
            directive.require = 'ngModel'; // communicate with the parent HTML tags ngModelController
            directive.link = function(scope, element, attrs, ctrl) {
                scope.$watch(function() { return ctrl.$modelValue }, function(newVal, oldVal){
                    console.log("value in my parent is: " + newVal);
                    // logic here, such as if (newVal.endsWith('.'))...
                });
            }
            return directive;
        });

然后在你的HTML中：＆lt; input type =“text”ng-model =“my.model”date-format＆gt;

Answer 2

由于您已经在使用模型，为什么不使用解析器进行自定义验证？使用范围监视是不必要的。您应该编写一个需要ngmodel控制器的指令。然后，您可以将解析器函数推送到可以执行所需操作的控制器。

您可以在此处阅读文档中有关解析器和格式化程序的更多信息： https://docs.angularjs.org/api/ng/type/ngModel.NgModelController

编辑：我有点不对，甚至不需要setviewvalue。我建议使用解析器而不是范围观察。

这是一个例子： http://jsfiddle.net/u8unudnr/2/

app.directive('parserFormatterExample', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, attrs, ctrl){
            ctrl.$parsers.push(function(viewValue){
                // logic goes here
                var newValue = viewValue.replace(/[.]/g, "");
                return newValue;               
            });
        }
    }
});

Answer 3

如果您未使用angular-ui安装并使用它，请在输入中添加以下语法：

<input class="input-date" type="text" placeholder="DD.MM.YY" ng-model="hctrl.dateInput" ui-mask="99.99.9999" model-view-value="true">

模型视图值将在模型对象上保留蒙版。

在angularJS

3 个答案: