AngularJS：将指令应用于所有匹配的标签答案

【问题标题】：AngularJS: Applying directives to all matching tagsAngularJS：将指令应用于所有匹配的标签
【发布时间】：2014-08-10 19:55:45
【问题描述】：

我已经构建了一个大型 Web 表单（超过 100 个字段），我想添加 AngularJS 以使用户能够在表单中键入并运行 Javascript 以在他们键入时将 Angular 模型存储在数据库中。显然，我不想每次用户更改一小部分数据时都将数据发送到数据库，所以我想使用 ng-model-options 指令告诉 Angular 仅在 500 毫秒左右后触发 updateOn。

我真的不想在我的 HTML 中的每个 <input> 标记上应用大量的角度，这需要大量的输入，如果我想要更改某些内容，那么需要经过很多地方并手动更新。我真正想做的是$("input").setDirective() 之类的东西，如果它存在的话。我意识到我正在以 jQuery 类型的方式考虑这个问题，所以我很想听听“正确”的 Angular 方式，将相同的指令集应用于我的 DOM 中与某些选择器匹配的每个元素。

谢谢！

【问题讨论】：

标签： javascript html angularjs

【解决方案1】：

对@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

【讨论】：

这很棒，它向我展示了如何“选择”所有<input> 标签；但我仍然看不到如何向 <input> 标签添加指令。假设我想将ng-model=attributes.name 添加到所有<input> 标签中，既然我已经选择了它，我该如何将ng-model 指令添加到标签中？
如果您的问题得到解决，能否请您将其标记为答案 :) 或者让我知道您面临的问题。

【解决方案2】：

你可以像这样为<input>标签创建一个指令：

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

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

演示：http://jsfiddle.net/zjdscakc/

【讨论】：

为了避免无用的调用，请使用对象属性作为 ng-model，如下所示：ng-model="storage[fieldName]"。在控制器中的存储上添加一个观察者，如果数据已更改，请将 changeFlag 设置为 true。在你的 setTimeout 中——如果你想使用一个——检查是否追加了更改，如果为真，则启动 XHR 查询并重置 changeFlag :) 这样，您将仅在需要时调用服务器。
这很棒，它向我展示了如何“选择”所有<input> 标签；但我仍然看不到如何向 <input> 标签添加指令。假设我想将ng-model=attributes.name 添加到所有<input> 标签中，既然我已经选择了它，我该如何将ng-model 指令添加到标签中？
我不知道这是否可能...但是您可以访问输入元素（link 函数中的第二个参数），您可以在其中为onchange 事件添加事件侦听器（@987654331 @) 并在没有数据绑定的情况下完成您的工作...

【解决方案3】：

我发现有人问过类似的问题，我只是不知道如何搜索它：Add directives from directive in AngularJS。使用它作为我的模板，我想出了如何将新指令应用于包含自定义指令的所有内容。我不知道如何将它直接应用于所有<input> 标签，但是向我所有的<input> 添加一个saveme 指令并没有花费太长时间。 ;)

【讨论】：