- 首页
- 其他开发
- 指令中的 Angular JS ng-message
指令中的 Angular JS ng-message
[英] Angular JS ng-message inside directive
本文介绍了指令中的 Angular JS ng-message的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在自定义指令中有一些输入字段.我正在尝试使用 ng-message 来显示自定义指令中字段的验证错误文本.
当我提交时，不会显示自定义指令中的验证消息.
我的问题是，我可以在指令中使用 ng-message，并使用来自表单控制器的父操作触发它，并显示消息吗?
我的 app.js 源代码示例
var app = angular.module('plunker', ['ngMessages']);app.controller('MainCtrl', function($scope) {var vm = 这个；vm.identity = {};vm.save = 函数(){console.log('表单数据将提交到服务器');}});app.directive('nameInfo', function() {返回 {templateUrl: 'name.html',范围: {名称: '=',提交:'='}};});
我的html代码
<div class="form-group"><input type="text" class="form-control" id="addressOne" name="addressOne"placeholder="地址行 1" required="required" ng-model="vm.identity.addressOne"/><div role="alert" ng-messages="plnkrForm.addressOne.$error"data-ng-if="已提交&& plnkrForm.addressOne.$invalid"><span class="error" ng-message="required">Required</span>
<name-info name="vm.identity.name" submit="已提交"></name></表单>
我的指令模板
<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="已提交&& plnkrForm.firstname.$invalid"><span class="error" ng-message="required">Required</span>
<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="已提交&& plnkrForm.middlename.$invalid"><span class="error" ng-message="required">Required</span>
<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="已提交&& plnkrForm.lastname.$invalid"><span class="error" ng-message="required">Required</span>
这是问题的 我的 plunker.
解决方案
您已经明确定义了指令的隔离范围，因此 plnkrForm 不存在.解决此问题的最快方法是删除隔离范围.根据您的示例，无论如何您都不需要它.
所以指令变成
app.directive('nameInfo', function() {返回 {templateUrl: 'name.html'};});
在这种情况下，指令有点矫枉过正.您也可以使用 ng-include 获得相同的结果.所以你可以替换这个
</name-info>
有了这个
<div ng-include="'name.html'"></div>
<小时>
如果您坚持使用指令和隔离作用域来执行此操作，请按以下步骤操作.将表单传递给指令并在您的模板/链接/控制器中使用它并相应地更改模板.
在您的主"页面
JavaScript
app.directive('nameInfo', function() {返回 {templateUrl: 'name.html',范围: {形式:'='，名称:'='}};});
指令模板
<输入类型="文本"类=形式控制"占位符=名字"名字=名字"ng-model="name.firstname"必需=真"><div角色=警报"ng-messages="form.firstname.$error"data-ng-if="form.$submitted && form.firstname.$invalid"><span class="error" ng-message="required">Required</span>
<小时><块引用>
现在，我知道您的意图是好的，因为您想避免干燥".如果你研究这些例子，你会发现你得到了相同的结果，通过使用简单的 ng-include 实现功能和可重用性.在这里，我们除了增加了不必要的复杂性之外，什么都没实现.
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.
When I do submit, validation messages inside custom directive is not shown.
My question is, can I use ng-message inside directive, and trigger it using parent action from form controller, and the message is shown?
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: '='
}
};
});
My html code
<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>
My directive template
<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>
Here is my plunker for the question.
解决方案
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.
So directive becomes
app.directive('nameInfo', function() {
return {
templateUrl: 'name.html'
};
});
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>
with this
<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.
In your "main" page
<name-info form="plnkrForm" name="name"></name-info>
JavaScript
app.directive('nameInfo', function() {
return {
templateUrl: 'name.html',
scope: {
form: '=',
name: '='
}
};
});
Directive template
<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.
这篇关于指令中的 Angular JS ng-message的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
