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私は2つの問題に直面しています:

  1. angularjs 1.2.6 ではng-required検証を実行できますcustom-inputが、1.3.0 では検証が実行されません。
  2. ng-pattern両方のバージョンで検証を開始できません。

私の理解では、すべて$setViewValueのngModelController検証が開始されます。上記は不自然な例です。私の実際の使用例は、SSN の 3 つの入力ボックスをレンダリングするカスタム ディレクティブを作成することです。

以下は、それぞれ 1.2.6 と 1.3.0 のプランカー リンクです。

Angularjs 1.2.6 Angularjs 1.3.0

4

3 に答える 3

0

ディレクティブ内の分離スコープで、「@」の代わりに「=」を使用してバインドしてみてください

@ を使用すると、link(ing) 関数で値を使用する必要がある場合、attr.$observe('title', function(value) { ... }) を使用する必要があります。たとえば、 if(scope.title == "...") は期待どおりに機能しません。これは、この属性に非同期でのみアクセスできることを意味することに注意してください。テンプレートで値のみを使用している場合は、$observe() を使用する必要はありません。例: テンプレート: '{{title}}'。

= では、$observe を使用する必要はありません。

(From 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 に答える