Question

我正在学习AngularJS，我想完成一项简单的任务。在表单输入上，我想隐藏相应的“输入 - 帮助”，即使输入中输入的数据无效。我现在这样做的方式调用了一些jquery。但我正在寻找使用AngularJS逻辑的方法。我想我应该使用指令，但由于我是棱角分明的新手，我不知道该怎么做。

以下是使用jquery：JSFIDDLE

的jsFiddle示例代码

这里是jsFiddle示例代码无效（没有jquery）：JSFIDDLE {对于测试，只需在密码输入中输入几个文本并将其模糊}

这是我的代码：{jquery}

$(document).on('blur', '.immediate-help', function () {
    $(this).next('.input-help').fadeOut();
}).on('focus', '.immediate-help', function () {
    $(this).next('.input-help').fadeIn();
});

这可以按预期工作，但我想使用angular指令来完成它。当然，我并不反对在angular指令中使用jquery。

因此，为了恢复，我想在触发模糊输入时隐藏'输入 - 帮助'，即使文本无效并使用angular指令。

有人能告诉我正确的方法吗？

Answer 1

您可以使用Angular-ui。

Angular-UI提供了一系列指令，可以帮助您。你有ui-event指令。

例如，您可以使用

<input ui-event="{ blur : 'blurCallback()' }">
...
<script>
$scope.blurCallback = function() {
alert('Goodbye');
};
</script>

Answer 2

几种方法：

在指令中使用脚本：

如果jQuery.js在页面中的anugular.js之前加载，则指令elm回调中的

link参数是一个jQuery对象...如果不包含jQuery.js，则它是jQlite。

jQlite有许多最常见的jQuery方法，所以你可以使用：

elm.bind('blur....

有关jQlite方法的列表，请参阅 angular.element docs 。

使用ng-class

提供表单并控制name。这将创建一个对象formName，其中的属性由字段名称表示。然后，您可以在类中使用角度表达式，或在标记

中使用disabled等属性

<form name="myForm">
    <input name="passord"/>
    <div ng-class="{ShowMeClassName: myForm.password.$invalid}"> Error content</div>
</form>

ng-class将根据名为ShowMeClassName

的表单中名为password的字段的有效性切换班级myForm

使用AngularJS隐藏表单上的输入 - 帮助

2 个答案: