angularjs – 将属性从自定义指令复制到输入

发布时间：2020-12-17 07:13:41 所属栏目：安全来源：网络整理

导读：我有一个自定义的driective,用div包装输入并添加一个标签. my-input label="My Label" name="myname" ng-model="mymodel" ng-pattern="/^[a-z]+$/" 我想可选地使用所有可能的角度指令来输入像ng-pattern,ng-minlength等.现在它看起来像这样： app.directive(

我有一个自定义的driective,用div包装输入并添加一个标签.

<my-input label="My Label" name="myname" ng-model="mymodel" ng-pattern="/^[a-z]+$/">

我想可选地使用所有可能的角度指令来输入像ng-pattern,ng-minlength等.现在它看起来像这样：

app.directive('myInput',[function () {
    return {
        restrict: "E",replace: true,scope: {
            ngModel: '=',name: '@',ngMinlength: '=',ngMaxlength: '=',ngPattern: '@',label: '@'                
        },compile: function(element,attrs){

            if(!_.isUndefined(attrs['ngMinlength'])) {
                element.find('input').attr('ng-minlength','ngMinlength');
            }
            if(!_.isUndefined(attrs['ngMaxlength'])) {
                element.find('input').attr('ng-maxlength','ngMaxlength');
            }                
            if(!_.isUndefined(attrs['ngPattern'])) {
                element.find('input').attr('ng-pattern',attrs['ngPattern']);
            }               


        },template: '<div class="form-group">'
        + '<label>{{ label | translate }}</label>'
        + '<div>'
        + '<input type="text" class="form-control input-sm" name="{{ name }}" ng-model="ngModel">'           
        + '</div></div>'
    };
}]);

问题是我希望使用ng-pattern与输入中的ng-pattern完全相同,所以我希望有可能在ng-pattern中使用regexp,并且还可以使用模式使用范围变量($scope.mypattern = / ^ [ az] $/; … ng-pattern =“mypattern”).如何管理？

我想要两个都工作：

<my-input label="My Label" name="myname" ng-model="mymodel" ng-pattern="/^[a-z]+$/">

$scope.myPattern = /^[a-z]+$/
...
<my-input label="My Label" name="myname" ng-model="mymodel" ng-pattern="myPattern">

解决方法

我有三个答案.

>通常,不建议同时支持模型属性和String.这种情况由指令范围中的=声明处理,如果要传递String,则应使用简单引号.例如,ngBind的工作方式如下：ng-bind =“someModel”或ng-bind =“’some string’”
>如果你真的想,你可以尝试解析表达式.如果它是可解析的,则意味着它是范围模型.否则,它可能是一个字符串.请参阅下面的代码段中的工作示例：

angular.module('test',[])

.controller('test',function($scope) {
  $scope.model = "string from scope model";
})

.directive('turlututu',function($parse) {
 return {
   restrict: 'E',scope: {},template: '<div class="tu">{{content}}</div>',link: function(scope,elem,attrs) {
     try {
       scope.content = $parse(attrs.text)(scope.$parent);
     } catch(err) {
     } finally {
       if (!scope.content) {
         scope.content = attrs.text;
       }
     }
   }
 };
});

body { font-family: monospace; }

.tu { padding: 10px; margin: 10px; background: #f5f5f5; border-bottom: 2px solid #e5e5e5; }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" ng-controller="test">
  
  <turlututu text="hardcoded string"></turlututu>
  <turlututu text="model"></turlututu>
  
</div>

>在ngPattern的情况下,因为代码中的好奇心总是对你有所帮助,你可以在Angular的源代码中看到他们测试属性的第一个字符：如果是/它被认为是正则表达式,否则是范围模型(参见示例)下面)

angular.module('test',function($scope) {
  $scope.model = /[a-z]*/;
})

.directive('turlututu',attrs) {
     if (attrs.regexp.charAt(0) === '/') {
       scope.reg = new RegExp( attrs.regexp.substring(1,attrs.regexp.length-1) );
     } else {     
       scope.reg = new RegExp( $parse(attrs.regexp)(scope.$parent) );
     }
     
     scope.content = scope.reg.toString()
   }
 };
});

body { font-family: monospace; }

.tu { padding: 10px; margin: 10px; background: #f5f5f5; border-bottom: 2px solid #e5e5e5; }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" ng-controller="test">
  
  <turlututu regexp="/[0-9]*/"></turlututu>
  <turlututu regexp="model"></turlututu>
  
</div>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!