Angular JS將自定義創建的指令（出於驗證目的）分配給變量

Question

使用anguar js，我創建了一個指令“整數”，如果您輸入的不是整數，則使表格無效。由於我通過從db獲取數據來動態創建頁面，因此我應該能夠指定驗證類型變量，並使用該變量作為指令，因為驗證可以是整數，雙精度等。請查看以下代碼，以便更好地理解。 http://plnkr.co/edit/QEqEexCzSDnUuuhnYpbN?p=preview

<form name="dynamicForm" ng-controller="Controller" ng-submit="applyConfiguration()">
    <my-customer info="component" name="{{dynamicName}}" ng-model="password" {{dynamicValidate}}></my-customer>
    <span class="error" ng-show="dynamicForm.{{dynamicName}}.$error.{{dynamicValidate}}">Not valid number!</span>
    <hr>
    <input type="submit" value='Apply'>
  </form>

(function(angular) {
  'use strict';
angular.module('docsIsolateScopeDirective', [])
  .controller('Controller', ['$scope', function($scope) {
    $scope.naomi = { name: 'Naomi', address: '1600 Amphitheatre' };
    $scope.igor = { name: 'Igor', address: '123 Somewhere' };
    $scope.persons = [$scope.naomi,$scope.igor];
    $scope.password = "first password";
    $scope.component = 'text';
    $scope.dynamicName = 'testName';
    $scope.dynamicValidate = 'integer';
    $scope.applyConfiguration = function(){
      alert($scope.password);
    }
  }])
  .directive('myCustomer', function() {
    return {
      restrict: 'E',
      scope: {
        info: '=',
        ngModel: '='
      },
      template: function(elem,attr){
        //var template = 'Name: {{info.name}} Address: {{info.address}}';
        var template = '<input type="{{info}}" name="fname" ng-model = "ngModel">';
        //elem.html(template);
        return template;
      }
    };
  }).directive('integer', function (){ 
        return {
            require: 'ngModel',
            link: function(scope, elem, attr, ngModel) {
                var validator = function (value) {
                    //var num = parseFloat(value);

                     if(/^(\-|\+)?([0-9]+(\[0-9]+)?|Infinity)$/.test(value)){
                        ngModel.$setValidity('integer',true);
                        return value;
                    }else{
                        ngModel.$setValidity('integer',false);
                        return value;
                    }
                };
                ngModel.$parsers.unshift(validator);
                ngModel.$formatters.unshift(validator);
            }
        };
    });
})(window.angular);

因此，除了該屬性“ integer”之外，我還應該提供變量dynamicValidate，該變量已在控制器中初始化為“ integer”。 感謝和問候，Mukthi

Answer 1

而不是傳遞整數，而是創建通用的指令名稱驗證，然后在其中傳遞所需的驗證。

例如，

<my-customer info="component" name="{{dynamicName}}" ng-model="password" validation="integer"></my-customer>

並創建一個名為validation的指令

app.directive('validation', [function () {
  return {
    require: 'ngModel',
    link: function (scope, elem, attrs, ctrl) {

      scope.$watch('[' + attrs.ngModel + ', ' + attrs.validation + ']', function(value){
      if(value[0]=="integer")
        {
           //Your logic for integer here
         }
      }, true);

    }
  }

從邏輯上講這是正確的，應該可以工作，請嘗試一下