AngularJS将方法更改为指令

AngularJS Changing a method into Directives

本文关键字：指令 方法 AngularJS      更新时间：2024-05-30

大家好，

我在AngularJS中有一个小函数，用于根据用户的输入为文本字段提供不同的最大长度，代码如下

$scope.limit = '0';
$scope.textLengthFilter = function() {
        var x = $scope.han.substr(0, 1);
        //console.log("Show: " + x);
        var numberRegex = /[0-9]/;
        var alphaRegex = /^[AHK]/;
        if (numberRegex.test(x)) {
            $scope.limit = '7';
            console.log('number' + $scope.limit);
        } else if (alphaRegex.test(x)) {
            $scope.limit = '8';
            console.log('Alphanumber' + $scope.limit);
        }
    };

我的html是下面的

    <input type="text" ng-model="han" ng-change="textLengthFilter()" maxlength={{limit}}>{{han}}</input>

这很有效，但我也想进一步将其作为自定义指令，但我仍然不知道如何开始自己编写自定义指令。

这里的任何人都可以指导我如何将我的函数更改为自定义指令？？

考虑以下代码：

app.directive('myLimit', function(){
      return {
        scope: {
          myLimit: '=' // this is the variable that you pass in
        },
        restrict: 'A', // this says you want to use this directive as an attribute
        link: function(scope, element){
          var defaultLimit = 7; // this can also be passed in as a variable if you like
          element.attr('maxlength', defaultLimit); // set the maxlength attribute
          angular.element(element).on('keyup', textLengthFilter); // bind the filter function
          function textLengthFilter() {
              var x = scope.myLimit.substr(0, 1);
              var numberRegex = /[0-9]/;
              var alphaRegex = /^[AHK]/;
              // updated the maxlength attribute based on condition
              if (numberRegex.test(x)) {
                  element.attr('maxlength', defaultLimit);
              } else if (alphaRegex.test(x)) {
                  element.attr('maxlength', 8);
              }
          }
        }
      };
  });

然后在你的模板中你做：

<input type="text" ng-model="han" my-limit="han" />

代码可以更加简洁和简化，它只是为了演示目的而显式的。问我是否有什么可以解释的。

应该是这样的：

    var myApp = angular.module('myApp',[]);
    myApp.directive('myDirective', function() {    
    return {
            restrict: 'A',            
            link: function(scope, element, attrs) {                
                var limit = 0;                
                element.bind('change', function(e) {   
                    var x = element.val().substr(0, 1);
                    var numberRegex = new RegExp(/[0-9]/);
                    var alphaRegex = new RegExp(/^[AHK]/);
                    if (numberRegex.test(x)) {
                        limit = 7;
                        console.log('number ' + limit);            
                    } else if (alphaRegex.test(x)) {
                        limit = 8;
                        console.log('Alphanumber ' + limit);
                    }
                    element.attr('maxlength', limit);
                });
            }
        };
});

模板：

<input type="text" my-directive></input>

PS。您的正则表达式似乎已损坏。

相关文章：