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

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>",
}
});

我想在自定义指令中实现一个函数，这样，如果"displayname"的长度达到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。为其添加一个限制数字，该数字将用作输入文本的限制。

使用手表监视您的输入变化。

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>

此处的Plunk示例：https://plnkr.co/edit/1S8yiu?p=preview