Question

我想创建一个指令，它对表单中的所有输入字段做了很棒的事情。

但是，如果我只能将该指令应用一次（到<form>本身）而不是让它绑定到所有<input>的

，我会很高兴

我应该如何确定所有表单输入元素？

我看到了一些可能的解决方案：

element[0].childNodes  // filter all inputs
element[0].children
element[0].elements   // seems to contain nothing but the stuff i want

也许我甚至是心胸狭窄，在这里看不到正确的解决方案。

感谢任何帮助和赞成

Answer 1

警告：这只是一个想法，它在一个简单的例子中起作用。我不是说这是错的（尽管这是开放的讨论），但我没有在更复杂的背景下使用它。

所以......你实际上可以创建第二个input指令，只有在另一个指令（比如myDirective）被应用到封闭表格时才应用它。

假设您有两种形式：

<body>
    <form name="myForm1" ng-controller="MainCtrl">
      Name: <input id="name1" type="text" ng-model="data.name" /><br/>
      Surname: <input id="surname1" type="text" ng-model="data.surname" />
      <pre>{{data}}</pre>
    </form>
    <br/>
    <form name="myForm2" ng-controller="MainCtrl" my-directive>
      Name: <input id="name2" type="text" ng-model="data.name" /><br/>
      Surname: <input id="surname2" type="text" ng-model="data.surname" />
      <pre>{{data}}</pre>
    </form>
</body>

只有第二种形式标记了 my-directive。现在，您的指令可能如下所示：

app.directive("myDirective", function(){
    return {
        restrict: 'A',
        require: ['form'],
        controller: function() {
          // nothing here
        },
        link: function(scope, ele, attrs, controllers){
          var formCtrl = controllers[0];
          console.log("myDirective applied to form:", formCtrl.$name);
        }
    };
});

app.directive("input", function(){
    return {
        restrict: 'E',
        priority: -1000,
        require: '^?myDirective',
        link: function(scope, ele, attrs, ctrl){
          if (ctrl) {
            console.log("applying custom behaviour to input: ", ele.attr('id'));
            // ... awesomeness here
          }
        }
    };
});

查看live并查看日志。最初的input指令与您自己的指令并存。对此的证明是表单仍然有效（当您键入时，模型会更新：那是input的，然后是ngModel的工作）。

您的input指令也可以使用ngModel来操作输入值：

app.directive("input", function(){
    return {
        restrict: 'E',
        priority: -1000,
        require: ['?ngModel', '^?myDirective'],
        link: function(scope, ele, attrs, ctrls){
          var ngModel = ctrls[0];
          var myDirective = ctrls[1];
          if (myDirective) {
            console.log("applying custom behaviour to input: ", ele.attr('id'));
            // ... awesomeness here
          }
        }
    };
});

Answer 2

为什么不使用Angular的jqLite（或jQuery，如果你选择加载它）

angular.forEach(element.find('input'), function(node){ 
 awesomize(node)
});

如何获取表单中的所有输入字段（AngularJS指令）

2 个答案: