Question

嗨，我有以下指令来验证和重新格式化ssn＃。一切正常，除非我点击“保存”按钮，它永远不会更新$ scope。有帮助吗？以下是指令“

的代码

app.directive('validateSsn', function () {
    var SSN_REGEXP = /^(?!000)(?!666)(?!9)\d{3}[- ]?(?!00)\d{2}[- ]?(?!0000)\d{4}$/;
    var ssnPattern = {
        3: '-',
        5: '-'
    };
    return {
        require: 'ngModel',
        link: function (scope, elem, attr, ctrl) {
            var formatSSN = function () {
                var sTempString = ctrl.$viewValue;
                sTempString = sTempString.replace(/\-/g, '');
                var numbers = sTempString;
                temp = '';
                for (var i = 0; i < numbers.length; i++) {
                    temp += (ssnPattern[i] || '') + numbers[i];
                }
                ctrl.$viewValue = temp;
                elem.val(ctrl.$viewValue);
            };
            ctrl.$parsers.unshift(function (value) {
                // test and set the validity after update.
                var valid = SSN_REGEXP.test(value);
                ctrl.$setValidity('ssnValid', valid);
            });
            // This runs when we update the text field
            ctrl.$parsers.push(function (viewValue) {
                ctrl.$setValidity('ssnValid', valid);
                return viewValue;
            });
            elem.bind('blur', formatSSN);

        }
    };
});

Answer 1

有这个工作：

http://jsfiddle.net/10thfloor/8BRp4/8/（来自小提琴的代码）

使用elem.val（）设置输入值？看起来我们必须将该操作手动输入“$ digest”。

信用：@Jim： “更重要的是，只要你想在DOM事件中与$ scope进行交互，你就需要使用$ scope。$ apply”

<div>
    <legend>SSN:</legend>
    <form name="form" novalidate>
        <input type="text" ng-model="ssn" name="ssn" validate-ssn/>
        <br /> <span ng-show="form.ssn.$error.ssnValid">This is not valid SSN!</span>
    </form>
    unformatted: {{ssn}}
</div>

'use strict';

var app = angular.module('ssnApp', []);

app.directive('validateSsn', function () {
    var SSN_REGEXP = /^(?!000)(?!666)(?!9)\d{3}[- ]?(?!00)\d{2}[- ]?(?!0000)\d{4}$/;
    var ssnPattern = {
        3: '-',
        5: '-'
    };
return {
    require: 'ngModel',
    link: function (scope, elem, attr, ctrl) {
        var formatSSN = function () {
            var sTempString = ctrl.$viewValue;
            sTempString = sTempString.replace(/\-/g, '');
            var numbers = sTempString;
            var temp = '';
            for (var i = 0; i < numbers.length; i++) {
                temp += (ssnPattern[i] || '') + numbers[i];
            }
            ctrl.$viewValue = temp;

            // this is what was missing 
            scope.$apply(function(){
                 elem.val(ctrl.$viewValue);
            });
        };
        ctrl.$parsers.unshift(function (viewValue) {
            // test and set the validity after update.
            var valid = SSN_REGEXP.test(viewValue);
            ctrl.$setValidity('ssnValid', valid);
            return viewValue;
        });
        // This runs when we update the text field
        ctrl.$parsers.push(function (viewValue) {

            var valid = SSN_REGEXP.test(viewValue);
            ctrl.$setValidity('ssnValid', valid);
            return viewValue;
        });
        elem.bind('blur', formatSSN);

       }
    };
});

angular.bootstrap(document, ['ssnApp']);

Answer 2

请参阅下面的小提琴添加内容。正如您将注意到，未格式化的值不会出现在ng-repeater中。我错过了什么？

<form name="form" ng-repeat="contact in contacts" novalidate>
    <label>SSN</label>
       <input type="text" ng-model="contact.ssn" name="ssn" validate-ssn/>
    <br /> <span ng-show="form.ssn.$error.ssnValid">This is not valid SSN!</span>
      unformatted: {{ssn}}
</form>

controllerName

myApp.controller('ContactCtrl', function($scope) {
$scope.contacts = [{
fname: "Steve",
lname: "Bob",
relationship: "Spouse",
ssn: "617-35-8006",
phone: "(777)375-8033",
   }, {
fname: "Ryan",
lname: "Hart",
relationship: "Child",
ssn: "666-22-8889",
phone: "(777)375-8033",
 }, {
fname: "Gina",
lname: "Pane",
relationship: "Child",
ssn: "997-11-6483",
phone: "(777)375-8033",
}];
   });

angular js格式化输入不保存新值

2 个答案: