[英]Nested directiv on Form. AngularJS
我无法弄清楚如何在AngularJS上进行适当的嵌套指令。
主题:我在ngModel模式上使用了指令创建了一个自定义。 然后,我想在我之前的新输入元素(伪指令)中使用top指令创建表单。
请问我没有使用正确的方法,嵌套指令不是一个好的答案。
angular
.module('app')
.directive('checkIp', [ 'appApiResource', function ( appApiResource)
{
return {
require: 'ngModel',
link: function (scope, elm, attrs, ctrl)
{
ctrl.$validators.checkip = function (model_value, view_value)
{
console.log(model_value);
if (typeof model_value !== 'undefined' && appApiResource.isValideIp(model_value) )
{
return true;
}
else
{
return false;
}
};
}
};
}] );
对于我的顶级控制器,这只是我的children指令内部的模板。
问题是我想将正确的格式和元素传递给我的指令:
<div class="form-group" ng-class="{ 'has-error' : userForm.name.$invalid && !userForm.name.$pristine, 'has-success' : userForm.name.$valid && !userForm.name.$pristine }">
<div class="input-group">
<span class="input-group-addon">Search</span>
<input type="text" name="name" class="form-control" ng-model="ngModel" check-ip="ngModel" required>
</div>
<p ng-show="userForm.name.$invalid && !userForm.name.$pristine" class="help-block">Provide an IP</p>
</div>
我想我必须检查范围:{ngModel:“ =”}但我迷路了。
谢谢
找到我的解决方案:最高指令:
return {
scope: false,
template: function(tElement, tAttrs)
{
var userformelem = tAttrs.userform+'.'+tAttrs.ngModel;
console.log(userformelem);
var html = '<div class="form-group" '+
'ng-class="{ \'has-error\' : '+userformelem+'.$invalid && !'+userformelem+'.$pristine, '+
' \'has-success\' : '+userformelem+'.$valid && !'+userformelem+'.$pristine }">'+
'<div class="input-group">'+
'<span class="input-group-addon">Search</span>'+
'<input type="text" name="'+tAttrs.ngModel+'" class="form-control" ng-model="'+tAttrs.ngModel+'" wfw-check-ip="'+tAttrs.ngModel+'" required>'+
'</div>'+
'<p ng-show="'+userformelem+'.$invalid && !'+userformelem+'.$pristine" class="help-block">Provide an IP</p>'+
'</div>'
return html;
}
};
HTML在哪里:
<input-ip userform="userForm" ng-model="ip" ></input-ip>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.