Angular JS ng-message内部指令 [英] Angular JS ng-message inside directive

问题描述

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

I have some input fields inside custom directive. I'm trying to use ng-message to display validation error text for the fields inside custom directive.

当我提交时，custom指令中的验证消息不会显示.

When I do submit, validation messages inside custom directive is not shown.

我的问题是，我可以在指令内部使用ng-message，并使用来自表单控制器的父操作来触发它，并显示消息吗?

My question is, can I use ng-message inside directive, and trigger it using parent action from form controller, and the message is shown?

我的app.js源示例

My app.js source sample

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>

这里是我的朋克车.

推荐答案

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

You have explicitly defined isolated scope for your directive, so plnkrForm does not exist. Quickest way to fix this is that you drop the isolated scope. Based on your example, you don't need it anyway.

所以指令变成

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

在这种情况下，指令有点过大了.您也可以使用ng-include获得相同的结果.因此，您可以替换它

And this being the case, directive is a bit of an overkill. You could get same result using ng-include, too. So you could replace this

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

与此

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

---

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

---

If you insist doing this using a directive and isolated scope, here's how it's done. Pass form into directive and use it in your template/link/controller and change template accordingly.

在主"页面中

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

JavaScript

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>

---

现在，我知道您的意图很好，因为您想避免"DRY".如果 学习这些示例，您会发现获得相同的结果， 通过使用简单的ng-include来实现功能性和可重用性.在这里，我们 除了增加不必要的复杂性，什么都没有.

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.

这篇关于Angular JS ng-message内部指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！