Question

我需要帮助。我正在学习如何创建自定义指令。我正在尝试使用自定义指令实现一个函数。我在网上搜索但没有找到合适的解决方案。我的HTML代码如下：

<custom-search>
            <input type="text" ng-model="displayname" placeholder="Enter your name here" />
            <h1>Welcome {{displayname}}!!</h1>   
    </custom-search>

我的JS文件有自定义指令，如下所示：

myApp.directive('customSearch', function () {

    return {

        restrict: "EA",

        template: "<b>Hello my directive</b>",
    }
});

我想在自定义指令中实现一个函数，这样如果＆＃34; displayname＆＃34;的长度，我就无法进一步输入。达到60。

我的逻辑如下：

if ($scope.displayname.length > =60) {
                        if ($scope.displayname.length === 60) {
                            $scope.temp = $scope.displayname;
                            return;
                        }
                        if ($scope.displayname.length > 60) {
                            $scope.displayname = $scope.temp;
                            return;
                        }
                        return;
                    }
        }

Answer 1

编写一个指令函数，其输入参数为fieldLimit，用于监视。将此输入的值设置为您的字段： displayName 。为其添加限制编号，该编号将用作输入文本的限制。

使用watch监控输入更改。

app.directive('customSearch', function () {
return {
    restrict: "EA",
    scope : {
      fieldLimit: '='
    },
    link: function($scope, $element, $attr) {
      var limit = $attr.limit;
       $scope.$watch('fieldLimit',function(value){
         console.log('changed:' + value);
         if (value != null && value.length > limit)
         {
           $scope.fieldLimit = value.substring(0,limit);
         }
       })
    }
}
});

然后在任何地方使用它，例如输入文字：

<div custom-search field-limit='displayName' limit='5'>
  <input type='input' ng-model='displayName'  />
</div>

这里的插图示例： https://plnkr.co/edit/1S8yiu?p=preview

在AngularJS中使用自定义指令实现函数

1 个答案: