4

我希望创建一个自定义指令，它呈现为输入类型元素。该指令应该重用 angularjs 验证框架。以下是custom-input我创建的实际指令：

<!doctype html>
<html ng-app="validationApp">
<body>
  <div class="container" ng-controller="ValidationController as validationController">
    <form name="myForm">
        {{employee | json}}
    <custom-input ng-required="true" ng-model="employee.name" name="employee.name" id="employeeName" ng-pattern="/^[0-9]{1,7}$/"/></custom-input>
    <span ng-show="myForm['employee.name'].$error.required">This is a required field</span>
    <span ng-show="myForm['employee.name'].$error.pattern">This is a invalid field</span>
    </form>
  </div>
  <script type="text/ng-template" id="/templates/customInput.html">
    <div>
        <input type="text" name="{{name}}" ng-model="newInput" id="{{id}}">
    </div>
  </script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js"></script>
</body>

</html>

与此对应的javascript是：

angular.module('validationApp', [])
.controller("ValidationController", function(){

})
.directive("customInput", function(){
    return {
        restrict: "E",
        require : "ngModel",
        replace: "true",
        templateUrl : "/templates/customInput.html",
        scope : {
            id : "@", //bind id to scope
            name : "@" //bind name to scope
        },
        link: function(scope, element, attrs, ngModelCtrl){
            //When newInput is updated, update the model of original input
             scope.$watch('newInput', function(newValue){
                ngModelCtrl.$setViewValue(newValue);
            });

            //On first load, get the initial value of original input's model and assign it to new input's model
            ngModelCtrl.$render = function(){
                var viewValue = ngModelCtrl.$viewValue;
                if(viewValue){
                    scope.newInput = viewValue;
                }
            }
        }
    }
});

我正在尝试在此自定义输入上应用ng-required和ng-pattern验证。我遇到了两个问题：

  1. 在 angularjs 1.2.6 中，我可以在 1.3.0 中触发ng-required验证，custom-input但不会触发验证。
  2. 我无法ng-pattern在两个版本中触发验证。

我的理解是$setViewValue将ngModelController触发所有验证。上面是一个人为的例子，我的实际用例是创建一个自定义指令，为 SSN 呈现三个输入框。

以下分别是 1.2.6 和 1.3.0 的 plunker 链接：

Angularjs 1.2.6 Angularjs 1.3.0

4

3 回答 3

4

  1. 要ng-required使其正常工作，请不要在内部输入表单的输入中使用相同的名称。我似乎在 Angular 1.3 中，这会覆盖已注册ngModelController附加到您的custom-input.

    所以指令的模板可以是

    <div>
  <input type="text" ng-model="newInput" id="{{id}}">
</div>

    这可以在http://plnkr.co/edit/TqMkxV?p=preview看到。

    （另外，不知道为什么在这里需要 id ......）

  2. 我认为（但我不确定）在 1.2.6 中ngPattern仅适用于input元素，而在 1.3 中它是与 ngModel 集成的单独指令。此外，为了让它在 1.3 中工作

    • 使用pattern代替ng-pattern，即使文档建议ng-pattern应该有效。

    • 如果您直接在模板中编写模式，请不要将其包装在/...中/。因此，正确使用它来寻找正好 5 位数字将是pattern="^\d{5}$". 文档在这方面具有误导性。

      您修改后的 1.3 示例，pattern可以在http://plnkr.co/edit/1zSiJI?p=preview看到一个工作示例

评论后编辑：

  1. 如果您确实希望名称出现在内部指令中，并且与父元素名称相同（例如，使用标准整页 POST 提交到服务器），您可以将其包装在命名的ngForm. 这将确保其控制器不会覆盖范围内的父控制器。

    <div>
  <div ng-form name="customInput">
    <input type="text" ng-model="newInput" id="{{id}}" name="{{name}}">
  </div>
</div>

    这可以在http://plnkr.co/edit/Jrk63A?p=preview看到

于 2014-10-21T07:42:15.883 回答
0

在指令内的隔离范围内，尝试使用 '=' 而不是 '@' 绑定它

使用 @，如果您需要在 link(ing) 函数中使用值，则需要使用 attr.$observe('title', function(value) { ... })。例如， if(scope.title == "...") 不会像您期望的那样工作。请注意，这意味着您只能异步访问此属性。如果您只使用模板中的值，则不需要使用 $observe()。例如，模板：'{{title}}'。

使用 =，您不需要使用 $observe。

（来自AngularJS指令范围内的'@'和'='有什么区别？）

angular.module('validationApp', [])
.controller("ValidationController", function(){

})
.directive("customInput", function(){
return {
    restrict: "E",
    require : "ngModel",
    replace: "true",
    templateUrl : "/templates/customInput.html",
    scope : {
        id : "=", //bind id to scope
        name : "=" //bind name to scope
    },
    link: function(scope, element, attrs, ngModelCtrl){
        //When newInput is updated, update the model of original input
         scope.$watch('newInput', function(newValue){
            ngModelCtrl.$setViewValue(newValue);
        });

        //On first load, get the initial value of original input's model and assign it to new input's model
        ngModelCtrl.$render = function(){
            var viewValue = ngModelCtrl.$viewValue;
            if(viewValue){
                scope.newInput = viewValue;
            }
        }
    }
}
});
于 2014-10-20T21:52:03.930 回答
0

根据文档（https://docs.angularjs.org/guide/migration），正则表达式字符串用作 Angular 1.2 中 ng-pattern 的值。相反，在 1.3 中使用了正则表达式对象。

// 1.2
$scope.exp = '/abc/i'; //string

<input ng-pattern="{{exp}}" ...


// 1.3
$scope.exp = /abc/i; //regexp object

<input ng-pattern="exp" ...

这是我的自定义输入指令示例

角度 1.2.16 ：

http://jsfiddle.net/miyukiw/m03f2ymt/4/

角度 1.3.5：

http://jsfiddle.net/miyukiw/9d64oa1m/4/

我希望这会有所帮助。

于 2015-02-19T06:58:47.890 回答