angularjs - Angular JS ng-message 指令内

Question

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

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

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

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

---

如果您坚持使用指令和独立作用域来执行此操作，请按以下方式操作。将表单传递到指令中并在模板/链接/ Controller 中使用它并相应地更改模板。

在您的“主”页面

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

---

Now, I know your intentions are good as you want to avoid "DRY". If you study the examples, you'll notice that you get same result, functionality and reusability by using simple ng-include. Here we have achieved nothing but added, unnecessary complexity.