如何将 Input Text 和 ngMessage 放在 Directive templateUrl 中？可能吗？答案

【问题标题】：How to put Input Text and ngMessage inside a Directive templateUrl? Is it possible?如何将 Input Text 和 ngMessage 放在 Directive templateUrl 中？可能吗？
【发布时间】：2017-03-22 12:08:22
【问题描述】：

我想将下面的 html 代码放在 Angularjs 指令的 templateUrl 中，但我不知道如何正确操作。

我的 HTML 被放入 templateUrl

<div class="form-group" ng-class="{ 'has-error': userForm.username.$touched && userForm.username.$invalid }">
  <label>Name</label>
  <input type="text" name="username" class="form-control"
     ng-model="userForm.username"
     ng-minlength="5"
     ng-maxlength="10"
     required>

  <div class="help-block" ng-messages="userForm.username.$error" ng-if="userForm.username.$touched">
   <p ng-message="minlength">Your name is too short.</p>
   <p ng-message="maxlength">Your name is too long.</p>
   <p ng-message="required">Your name is required.</p>
  </div>
</div>

我的初始指令

app.directive('nameDirective', function () {
  return {
    restrict: 'AE',
    templateUrl: '/input-form/name.html'
  };
});

我在没有指令的情况下尝试了它，它工作正常。但是当我尝试将其放入指令中时，错误消息并没有按应有的方式显示。

【问题讨论】：

看看我的答案应该可以工作

标签： html angularjs angularjs-directive

【解决方案1】：

app.directive('nameDirective', function () {
 return {
   restrict: 'AE',
   templateUrl: '/input-form/name.html',
   transclude: true, 

 };
});

您需要使用ng-transclude，在您的指令选项中添加transclude: true，并将ng-transclude 添加到您的模板中：

<div ng-transclude class="form-group" ng-class="{ 'has-error': userForm.username.$touched && userForm.username.$invalid }">
<label>Name</label>
<input type="text" name="username" class="form-control"
     ng-model="userForm.username"
     ng-minlength="5"
     ng-maxlength="10"
     required>

    <div class="help-block" ng-messages="userForm.username.$error" ng-if="userForm.username.$touched">
    <p ng-message="minlength">Your name is too short.</p>
    <p ng-message="maxlength">Your name is too long.</p>
    <p ng-message="required">Your name is required.</p>
 </div>
</div>

【讨论】：

感谢您的回答。我试过ng-transclude，但对我的问题没有用。 @sachila 的答案对我有用。但再次感谢您的回答。感激不尽。

【解决方案2】：

需要用form标签包围html内容。

<form name="userForm">
      <div class="form-group" ng-class="{ 'has-error': userForm.username.$touched && userForm.username.$invalid }">

    <label>Name</label>
    <input type="text" name="username" class="form-control"
         ng-model="username"
         ng-minlength="5"
         ng-maxlength="10"
         required>

    <div class="help-block"  ng-messages="userForm.username.$error" ng-if="userForm.username.$touched">
    <p ng-message="minlength">Your name is too short.</p>
    <p ng-message="maxlength">Your name is too long.</p>
    <p ng-message="required">Your name is required.</p>
    </div>
    </div>
</form>

如果你还没有注入ngMessages

angular.module("app",['ngMessages'])

Demo

【讨论】：

感谢您提供的答案。这个对我有用。这是我正在寻找的确切答案。