Angular JS ng-message inside 指令

Question

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

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

我的问题是，我可以在指令中使用 ng-message，并使用表单控制器的父操作触发它，然后显示消息吗？

我的 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>

这里是my plunker 的问题。

Answer 1

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

所以指令变成了

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

在这种情况下，指令有点矫枉过正。您也可以使用ng-include 获得相同的结果。所以你可以替换这个

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

有了这个

<div ng-include="'name.html'"></div>

---

如果您坚持使用指令和隔离范围来执行此操作，请按以下方式完成。将表单传递给指令并在您的模板/链接/控制器中使用它并相应地更改模板。

在您的“主”页面中

<name-info form="plnkrForm" name="name"></name-info>

JavaScript

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

指令模板

<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 实现功能和可重用性。在这里，我们 除了增加了不必要的复杂性之外，什么也没取得。