Angularjs Angular JS ng消息内部指令

我在自定义指令中有一些输入字段。我正在尝试使用ng消息显示自定义指令内字段的验证错误文本

当我提交时，自定义指令内的验证消息不会显示

我的问题是，我是否可以在指令内部使用ng message，并使用form controller的父操作触发它，然后显示消息

My app.js源代码示例

var app = angular.module('plunker', ['ngMessages']);
app.controller('MainCtrl', function($scope) {
   var vm = this;
   vm.identity = {};

   vm.save = function() {
      console.log('form data will submited to server');
   }
});
app.directive('nameInfo', function() {
   return {
     templateUrl: 'name.html',
     scope: {
       name: '=',
       submitted: '='
     }
   };
});

我的html代码

<form name="plnkrForm" novalidate ng-submit="plnkrForm.$valid && vm.save()">
   <div class="form-group">
      <button type="submit" class="btn" data-ng-click="submitted=true">
       Update
      </button>
   </div>
   <div class="form-group">
      <input type="text" class="form-control" id="addressOne" name="addressOne"
       placeholder="Address line 1" required="required" ng-model="vm.identity.addressOne" />
      <div role="alert" ng-messages="plnkrForm.addressOne.$error"
       data-ng-if="submitted && plnkrForm.addressOne.$invalid">
          <span class="error" ng-message="required">Required</span>
      </div>
   </div>
   <name-info name="vm.identity.name" submitted="submitted"></name>
</form>

我的指令模板

<div class=form-group>
   <input type="text" class="form-control" placeholder="Firstname" id="firstname"
    name="firstname" ng-model="name.firstname" required="required" />
   <div role="alert" ng-messages="plnkrForm.firstname.$error"
    data-ng-if="submitted && plnkrForm.firstname.$invalid">
      <span class="error" ng-message="required">Required</span>
   </div>
</div>

<div class=form-group>
   <input type="text" class="form-control" placeholder="Middlename" id="middlename"
    name="middlename" ng-model="name.middlename" required="required" />
   <div role="alert" ng-messages="plnkrForm.middlename.$error"
    data-ng-if="submitted && plnkrForm.middlename.$invalid">
      <span class="error" ng-message="required">Required</span>
    </div>
</div>

<div class=form-group>
   <input type="text" class="form-control" placeholder="Lastname" id="lastname"
    name="lastname" ng-model="name.lastname" required="required" />
   <div role="alert" ng-messages="plnkrForm.lastname.$error"
    data-ng-if="submitted && plnkrForm.lastname.$invalid">
      <span class="error" ng-message="required">Required</span>
   </div>
</div>

<div class=form-group>
  <input type="text" 
         class="form-control" 
         placeholder="Firstname" 
         name="firstname" 
         ng-model="name.firstname" 
         required="true">
  <div role="alert" 
       ng-messages="form.firstname.$error" 
       data-ng-if="form.$submitted && form.firstname.$invalid">
       <span class="error" ng-message="required">Required</span>
  </div>
</div>

---

这里有一个问题。

您已经为指令明确定义了隔离范围，因此plnkrForm不存在。解决这个问题的最快方法是删除隔离的作用域。根据您的示例，您无论如何都不需要它

所以指令变成了

app.directive('nameInfo', function() {
  return {
    templateUrl: 'name.html'
  };
});

在这种情况下，指令有点过分了。使用ng include也可以得到相同的结果。所以你可以替换这个

<name-info 
  name="vm.identity.name" 
  submitted="submitted">
</name-info>

指令模板

<div class=form-group>
   <input type="text" class="form-control" placeholder="Firstname" id="firstname"
    name="firstname" ng-model="name.firstname" required="required" />
   <div role="alert" ng-messages="plnkrForm.firstname.$error"
    data-ng-if="submitted && plnkrForm.firstname.$invalid">
      <span class="error" ng-message="required">Required</span>
   </div>
</div>

<div class=form-group>
   <input type="text" class="form-control" placeholder="Middlename" id="middlename"
    name="middlename" ng-model="name.middlename" required="required" />
   <div role="alert" ng-messages="plnkrForm.middlename.$error"
    data-ng-if="submitted && plnkrForm.middlename.$invalid">
      <span class="error" ng-message="required">Required</span>
    </div>
</div>

<div class=form-group>
   <input type="text" class="form-control" placeholder="Lastname" id="lastname"
    name="lastname" ng-model="name.lastname" required="required" />
   <div role="alert" ng-messages="plnkrForm.lastname.$error"
    data-ng-if="submitted && plnkrForm.lastname.$invalid">
      <span class="error" ng-message="required">Required</span>
   </div>
</div>

<div class=form-group>
  <input type="text" 
         class="form-control" 
         placeholder="Firstname" 
         name="firstname" 
         ng-model="name.firstname" 
         required="true">
  <div role="alert" 
       ng-messages="form.firstname.$error" 
       data-ng-if="form.$submitted && form.firstname.$invalid">
       <span class="error" ng-message="required">Required</span>
  </div>
</div>

现在，我知道你的意图是好的，因为你想避免干燥。如果 你研究这些例子，你会发现你得到了同样的结果， 通过使用简单的ng include实现功能性和可重用性。我们到了 除了增加不必要的复杂性，我们什么也没做

---

谢谢你的建议，但是如果我需要单独的作用域，并且在我的指令中有单独的控制器，该怎么办呢？不管怎样，谢谢你的回复。嗯。。。当涉及表单字段时，需要独立作用域或独立控制器的用例是什么？在我的例子中，表单包含很多信息，其中一个信息是地址实体地址行1、门牌号等，该地址将支持google place和google map。所以我不想让页面的控制器太大。还有对数据的操作，我的解决方案是创建具有独立作用域的指令，这也是因为该指令将在另一个页面中重复使用。我只是试着不做重复代码，也试着实现单一的原则。相应地更新了我的答案。在这里我们什么也没做，只是增加了不必要的复杂性。

<div class=form-group>
  <input type="text" 
         class="form-control" 
         placeholder="Firstname" 
         name="firstname" 
         ng-model="name.firstname" 
         required="true">
  <div role="alert" 
       ng-messages="form.firstname.$error" 
       data-ng-if="form.$submitted && form.firstname.$invalid">
       <span class="error" ng-message="required">Required</span>
  </div>
</div>