javascript - ng-pattern 正则表达式 错误 : [$parse:lexerr] Lexer Error

Question

我将此作为我的正则表达式模式

(^([Aa][Ss])[0-9]{8})|(^6[0-9]{7})

我收到下面的控制台错误，但它有效!:

libraries-c8d65edf41.js:22505 Error: [$parse:lexerr] Lexer Error: Unexpected next character  at columns 1-1 [^] in expression [(^([Aa][Ss])[0-9]{8})|(^6[0-9]{7})].

http://errors.angularjs.org/1.5.2/ $parse/lexerr?p0=意外%20nexthaacter%20&p1=s%201-1%20%5B%5E%5D&p2=(%5E(%5BAa%5D%5BSs%5D)%5B0-9%5D %7B8%7D)%7C(%5E6%5B0-9%5D%7B7%7D)

关于如何消除控制台错误有什么想法吗？ 谢谢。

这是指令 html

<div class="input">
<div data-ng-class="{'input-group': label}">
    <div class="input-group-addon"
        data-ng-if="label">
        {{label}}
        <span class="required"
            data-ng-if="required && isEditable">
            *
        </span>
    </div>
    <div class="input-group-addon required"
        data-ng-if="!label && required && isEditable">
        *
    </div>
    <div class="form-control"
        title="{{object[key] || 'N/A'}}"
        data-ng-if="!isEditable">
        <span>{{object[key] || 'N/A'}}</span>
    </div>
    <div class="form-control editable"
        title="{{object[key] || 'N/A'}}"
        data-ng-if="isEditable && !isEditing"
        data-ng-click="edit()">
        <span>
            <a href="">{{object[key] || 'N/A'}}</a>
        </span>
    </div>
    <input class="form-control"
        data-ng-if="isEditable && isEditing"
        data-ng-model="model.value"
        data-ng-keydown="onKeypress($event)"
        data-ng-blur="save()"
        data-ng-pattern="regexPattern"
        name="{{inputName}}"
        data-csdp-autofocus />
</div>

这是指令的 js

(function (angular) {
'use strict';

angular.module('commons.directives.forms')
    .directive('exInput', InputDirective);

InputDirective.$inject = ['$q', 'commons.constants.KeyCodeConstant'];

function InputDirective ($q, KeyCodeConstant) {
    return {
        restrict: 'A',
        replace: true,
        templateUrl: 'commons/directives/forms/input.directive.html',
        link: link,
        scope: {
            input: '@exInput',
            isEditable: '=?',
            object: '=ngModelObject',
            key: '@ngModelKey',
            autofocus: '=?',
            required: '@ngRequired',
            inputName: '@inputName',
            regexPattern: '@ngPattern',
            preEditing: '&',
            onEditing: '&',
            onSave: '&',
            onCancel: '&',
            onFinally: '&',
            onInit: '&'
        }
    };

    function link (scope) {
        scope.edit = edit;
        scope.save = save;
        scope.cancel = cancel;
        scope.onKeypress = onKeypress;
        scope.label = scope.input;
        scope.model = { value: '' };
        scope.isEditing = scope.autofocus ? scope.autofocus : false;

        var oldValue;

        function edit () {
            $q.when(scope.preEditing()).then(function() {
                oldValue = scope.object[scope.key];
                scope.model.value = oldValue;
                scope.label = '> ' + scope.input;
                scope.onEditing();
                scope.isEditing = true;
            });
        }

        function save () {
            scope.object[scope.key] = scope.model.value;
            scope.onSave();
            onFinally();
        }

        function cancel () {
            scope.object[scope.key] = oldValue;
            scope.onCancel();
            onFinally();
        }

        function onKeypress (event) {
            if (event.keyCode === KeyCodeConstant.ENTER) {
                save();
            } else if (event.keyCode === KeyCodeConstant.ESC) {
                cancel();
            }
        }

        function onFinally () {
            scope.label = scope.input;
            scope.isEditing = false;
            scope.onFinally();
        }

        scope.onInit({ $scope: scope });
    }
}

})( Angular );

这是我的使用方法；

<input class="form-margin"
                        data-ex-input="Assignment ID"
                        data-is-editable="true"
                        data-ng-model-object="vm.contract"
                        data-ng-pattern="{{vm.AssignmentIdRegex}}"
                        data-input-name="assignmentId"
                        data-ng-model-key="assignmentId" />
                    <div class="alert alert-info"
                    data-ng-show="contractForm.assignmentId.$error.pattern && contractForm.assignmentId.$dirty">
                        <strong>Assignment ID: </strong>ie. AS12345678 or 61234567
                    </div>

Answer 1

在 regx 表达式的开头和结尾使用转义字符 /，以便帮助解析器从属性 正确读取 regx ng-模式。

ng-pattern="/(^([Aa][Ss])[0-9]{8})|(^6[0-9]{7})/"

输入已通过:As00000000 & 61234567

Demo Plunkr