多个输入上的 Angular ngBlur答案

【问题标题】：Angular ngBlur on multiple inputs多个输入上的 Angular ngBlur
【发布时间】：2016-06-29 17:55:49
【问题描述】：

我目前正在尝试在编辑完一个网页后“保存”网页中的所有内容。 IE，用户点击输入，输入一些数据，一旦他/她点击其他地方，我想运行一个函数来收集所有模型数据并将其保存在浏览器本地存储中。

<input ng-blur="functionName()" />

这是正常的做法，但假设我有大量的输入：

<input ng-blur="functionName()" />
<input ng-blur="functionName()" />
<input ng-blur="functionName()" />
<input ng-blur="functionName()" />

我可以做些什么来将ng-blur 效果应用于页面的所有inputs，还是必须将ng-blur 属性放入每个input？

【问题讨论】：

对每个对象使用 ng-model 并将它们的值分配给一个对象，并在控制器中的对象上设置监视。
@JohnHalbert 实际上我的输入最多为<input ng-model="vm.item.type">。所以我可以从控制器上看到这个模型的变化？

标签： javascript angularjs

【解决方案1】：

您可以创建一个自定义指令来执行此操作。这是对此问题答案的改编：

AngularJS 1.3 - `ng-change`-like functionality for the entire form

尚未对此进行测试，但它应该能让您走上正轨。

.directive('inputsOnBlur', ['$parse', function($parse){
  return {
    link: function(scope, element, attrs){
       var cb = $parse(attrs.inputsOnBlur);
       element.find('input').on('blur', function(){
          cb(scope);
       });
    }
  }
}]);

并使用它：

<form inputs-on-blur="doSomething()">
   <input />
   <input />
   <input />
</form>

【讨论】：

非常感谢您的反馈！通过将inputs-on-blur 放入常规的div 中，这是否也可以工作，这是所有输入的容器？因为我没有使用表单，只是输入标签。
太好了，我会尽快尝试。谢谢！

【解决方案2】：

当然有可能。您需要动态添加data-ng-blur 到输入标签。您的控制器中的代码应该是：

var inputList = Array.prototype.slice.call(document.getElementsByTagName('input')); inputList.forEach(function (input) { input.setAttribute('data-ng-blur', 'functionName()'); $compile(angular.element(input))($scope); });

【讨论】：

所以这基本上只是以编程方式将ng-blur 放入所有inputs 中，对吗？
是的，它会将data-ng-blur 应用于您页面中的所有输入。如果你想指定ng-blur应该附加到哪种输入，你可以使用document.querySelectorAll('input[type="text"')。