AngularJS：将指令应用于所有匹配的标记

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.

我有一个我构建的大型Web表单(超过100个字段),我想添加AngularJS以使用户能够键入表单并运行Javascript以在键入时将Angular Model存储在数据库中。显然,我不希望每次用户改变一小块数据时都将数据发送到数据库,所以我想使用ng-model-options指令告诉Angular只在500ms左右后触发updateOn。

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.

我真的不想对我的HTML中的每个标签应用大量的角度,但这是很多打字,如果我想要改变一些东西,那么很多地方需要经过并手动更新。我真正喜欢的是像$(“input”)。setDirective()或者某些东西,如果它存在的话。我意识到我正在以jQuery类型的方式思考这个问题,所以我很有兴趣听到将相同的指令集应用于我的DOM中与某些选择器匹配的每个元素的“正确”Angular方法。

Thanks!

3 个解决方案

#1

Little modification to @Bodzio answer

对@Bodzio的修改很少

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>

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 DEMO

#2

You can just create a directive for <input> tag like this:

你可以像这样为标签创建一个指令:

var app = angular.module('app', []);

app.directive('input', function() {
  return {
      restrict: 'E',
      link: function (scope, element) {
          element[0].style.backgroundColor = "red";
      }
  };
});

demo: http://jsfiddle.net/zjdscakc/

#3

I figured out there was a similar question asked, I just didn't know how to search for it: Add directives from directive in AngularJS. Using that as my template, I figured out how to apply new directives to everything containing a custom directive. I could not figure out how to apply it to all <input> tags directly, but adding a saveme directive to all my <input> didn't take too long. ;)

我发现有一个类似的问题,我只是不知道如何搜索它:从AngularJS中的指令添加指令。使用它作为我的模板,我想出了如何将新指令应用于包含自定义指令的所有内容。我无法弄清楚如何直接将它应用于所有标签,但是向我的所有添加saveme指令并不需要太长时间。 ;)

#1