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

一尘不染

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

angularjs

我有一个自定义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，并在pattern（$scope.mypattern = /^[a-z]+$/; ... ng-pattern="mypattern"）中使用scope变量。如何处理？

我都想工作：

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

阅读 228

2020-07-04

共1个答案

一尘不染

我有三个答案给你。

通常，不建议同时支持模型属性和直接支持字符串。这种情况由=指令范围内的声明处理，如果要传递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', [])



    .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="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>

2020-07-04