AngularJS:应用指令到所有匹配的标签

编程入门 行业动态 更新时间:2024-10-24 09:23:59
本文介绍了AngularJS:应用指令到所有匹配的标签的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧! 问题描述

我有我建立了一个大型的网络形式,(100场),我想添加AngularJS,使用户键入的形式和运行JavaScript的角型存储在数据库中,因为他们的类型。显然,我不希望数据在用户每次改变一小片数据的实时发送到数据库,所以我想用 NG-模型选项指令告诉角只火了一个 updateOn 500毫秒后左右。

I have a large web form that I have built, (over 100 fields) and I want to add AngularJS to enable users to type into the form and run Javascript to store the Angular Model in a database as they type. Clearly I don't want to send data to the database every time the user alters a tiny piece of data, so I want to use the ng-model-options directive to tell Angular to only fire off an updateOn after 500ms or so.

我真的不想一个巨大的角量适用于每个<输入> 在我的HTML标签,虽然,这是一个很大的打字,如果我曾经想改变一些东西,这是一个很大的地方要经过和手动更新。我真正喜欢做的是一样的东西 $(输入)。setDirective()或者如果它存在诸如此类的事情。我意识到我在一个jQuery式的方式思考这个,所以我很感兴趣地听到采用相同的指令集的在我的DOM每一个元素,一些选择相匹配的适当的方式角

I really don't want to apply a huge amount of angular to every <input> tag in my HTML though, that's a lot of typing, and if I ever want to change something, it's a lot of places to go through and manually update. What I'd really like to do is something like $("input").setDirective() or somesuch thing if it existed. I realize I'm thinking about this in a jQuery-type way, so I'm interested to hear the "proper" Angular way of applying the same set of directives to every element in my DOM that matches some selector.

谢谢!

推荐答案

小修改@Bodzio答案

Little modification to @Bodzio answer

HTML

<div ng-app="app"> <input type="text" name="something" /> <input type="text" /> <input type="text" /> <input type="text" name="different" /> <input type="radio" name="different" /> </div>

JS

var app = angular.module('app', []); app.directive('input', function() { return { restrict: 'E', link: function (scope, element, attributes) { // filter the element using attributes if (attributes.type === "text" && attributes.name) { element[0].value = "It works!"; } } }; });

的jsfiddle演示

JSFIDDLE DEMO

更多推荐

AngularJS:应用指令到所有匹配的标签

本文发布于:2023-10-26 23:19:10,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1531643.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:指令   标签   AngularJS

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!