Question

鉴于此表格

<form class="form-signin" name="registerForm" role="registration" ng-submit="submit(registerForm)" novalidate>
  <div class="form-group username has-feedback">
    <input type="text" class="form-control" name="name" ng-model="registerObj.name" minlength="4" maxlength="32" required ng-model-options="{debounce : {'default' : 500, blur : 0}}">
    <span class="form-control-feedback" ng-if="registerForm.$submitted || registerForm.name.$touched">
      <i ng-if="registerForm.name.$pending" class="fa fa-spinner fa-spin-short"></i>
      <span ng-if="registerForm.name.$pending" class="sr-only">(validating)</span>
      <span ng-if="registerForm.name.$invalid" class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
      <span ng-if="registerForm.name.$invalid" class="sr-only">(error)</span>
      <span ng-if="registerForm.name.$valid" class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span ng-if="registerForm.name.$valid" class="sr-only">(success)</span>
    </span>
  </div>
</form>

是否可以将输入元素下的所有内容都设为模板，以便我可以将其重新用于此表单中的其他输入或任何其他形式的输入：

 <input-feedback aform="registerForm" aname="name"></input-feedback>

我正在学习Angular，直到现在我设法做了我想做的一切，但这让我陷入困境。我无法将所有这些状态（registerForm.name。$ valid等）传递给指令，以便他们按照我希望他们做的那样。

我们的想法是能够拥有如下形式：

<form class="form-signin" name="registerForm" role="registration" ng-submit="submit(registerForm)" novalidate>
  <div class="form-group username has-feedback">
    <input type="text" class="form-control" name="name" ng-model="registerObj.name" minlength="4" maxlength="32" required ng-model-options="{debounce : {'default' : 500, blur : 0}}">
    <input-feedback aform="registerForm" aname="name"></input-feedback>

    <input type="email" class="form-control" name="email" ng-model="registerObj.email" maxlength="32" required ng-model-options="{debounce : {'default' : 500, blur : 0}}">
    <input-feedback aform="registerForm" aname="email"></input-feedback>
  </div>
</form>

也可以使用其他形式的指令，该指令不具有名称＆＃34; registerForm＆＃34;，以及不同的字段。

Answer 1

试试这个plunkr：

http://plnkr.co/edit/zuDfSdU1pkibcBOUC3cL?p=preview

这是指令：

angular.module('myApp', [])
.directive('inputFeedback', function() {
  return {
    replace: true,
    template:    '<span class="form-control-feedback" ng-if="registerForm.$submitted || registerForm.name.$touched">' +
      '<i ng-if="registerForm.name.$pending" class="fa fa-spinner fa-spin-short"></i>' +
      '<span ng-if="registerForm.name.$pending" class="sr-only">(validating)</span>' +
      '<span ng-if="registerForm.name.$invalid" class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>' +
      '<span ng-if="registerForm.name.$invalid" class="sr-only">(error)</span>' +
      '<span ng-if="registerForm.name.$valid" class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>' +
      '<span ng-if="registerForm.name.$valid" class="sr-only">(success)</span>' +
    '</span>'
  }
});

注意使用范围虚假......虽然这可能不是“好的设计”。你实际上要求的是在某处转储一大堆HTML，而不是让自己包含行为。范围：虚假可以说更透明。

将表单输入状态传递给angular中的指令模板

1 个答案: