AngularJS:应用指令到所有匹配的标签 [英] AngularJS: Applying directives to all matching tags

查看:170
本文介绍了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:应用指令到所有匹配的标签的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆