Geek Answers Handbook

Angle check behaves differently for 1.3.0 and 1.2.6

I want to create a custom directive that displays as an input type element. The directive should reuse the structure of corner validation. Below is the directive custom-inputin the action I created:

<!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>

The corresponding javascript is as follows:

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 model and assign it to new input model
            ngModelCtrl.$render = function(){
                var viewValue = ngModelCtrl.$viewValue;
                if(viewValue){
                    scope.newInput = viewValue;
                }
            }
        }
    }
});

I try to apply the test ng-requiredand ng-patternfor that user input. I ran into two problems:

  • In angularjs 1.2.6, I can run the check ng-requiredin custom-input, but in 1.3.0, the check does not start.
  • I can not run the check ng-patternin both versions.

, $setViewValue of ngModelController . , - , SSN.

plunker 1.2.6 1.3.0 :

Angularjs 1.2.6 Angularjs 1.3.0

+4
3

:

  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

+4

, '=' '@'

@ attr. $observ ('title', function (value) {...}), link (ing). , (scope.title== "..." ) , . , , . $observ(), . , : '{{title}}'.

=, $observ.

(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 model and assign it to new input model
        ngModelCtrl.$render = function(){
            var viewValue = ngModelCtrl.$viewValue;
            if(viewValue){
                scope.newInput = viewValue;
            }
        }
    }
}
});
0

According to the document ( https://docs.angularjs.org/guide/migration ) the regex string is used as the value for ng-pattern in angular 1.2. In contrast, the regular expression object is used in 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" ...

Here is my own example input directive

angular 1.2.16:

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

angular 1.3.5:

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

Hope this helps.

0
source

More articles:


All Articles