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

本文介绍了将属性从自定义指令复制到输入的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

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

I have a custom driective which wraps input with div and adds a label.

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

我想为输入使用可选的所有可能的角度指令，例如ng-pattern，ng-minlength等.现在看起来像这样:

I want to use optionally all of possible angular directives for input like ng-pattern, ng-minlength etc. Now it looks like this:

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中使用正则表达式，并在模式($scope.mypattern = /^[a-z]+$/; ... ng-pattern="mypattern")中使用作用域变量.该如何管理?

The problem is that I want use ng-pattern exactly the same as ng-pattern works in input, so I want to have possibility to use regexp in the ng-pattern and also scope variable with pattern ($scope.mypattern = /^[a-z]+$/; ... ng-pattern="mypattern"). How to manage this?

我都想工作:

1.

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

2.

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

推荐答案

我为您提供了三个答案.

I have three answers for you.

通常，不建议同时支持模型属性和直接支持字符串.这种情况由指令范围内的=声明处理，如果要传递String，则可以使用简单的引号.例如，ngBind的工作方式如下:ng-bind="someModel"或ng-bind="'some string'"

In general, it is not recommended to support both a model property, and directly a String. This case is handled by a = declaration in your directive scope, and if you want to pass a String, you would use simple quotes. For instance ngBind works like this: ng-bind="someModel" or ng-bind="'some string'"

如果确实要，可以尝试解析表达式.如果它是可解析的，则表示它是作用域模型.否则，可能是字符串.请参见下面的代码片段中的工作示例:

If you really want to, you can try to parse the expression. If it is parsable, it means it is a scope model. Otherwise, it is likely a string. See working example in the code snippet below:

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="ajax.googleapis/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的源代码中看到他们测试属性的第一个字符:如果为/，则被视为正则表达式，否则为范围模型(请参见下面的示例)

In the case of ngPattern, because curiosity in code will always help you, you can see in the source code of Angular that they test the attribute first character: if it is / it is considered a regexp, otherwise a scope model (see example below)

angular.module('test', []) .controller('test', function($scope) { $scope.model = /[a-z]*/; }) .directive('turlututu', function($parse) { return { restrict: 'E', scope: {}, template: '<div class="tu">{{content}}</div>', link: function(scope, elem, 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="ajax.googleapis/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>