Mar*_*kLi 8 angularjs angularjs-directive angularjs-scope
我想用指令创建的字段创建表单.数据的数据绑定正常工作但验证不起作用.
这是html:
<body ng-controller="MainCtrl">
<h1>form</h1>
<form name="form">
<div ng-repeat="conf in config">
<div field data="data" conf="conf"></div>
</div>
</form>
<pre>{{data|json}}</pre>
</body>
控制器和现场指令:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.data = {name: '', age: ''}
$scope.config = [
{field: 'name', required:true},
{field: 'age'}
];
});
app.directive('field', function ($compile) {
return {
scope: {
data: '=',
conf: '='
},
link: function linkFn(scope, element, attrs) {
// field container
var row = angular.element('<div></div>');
// label
row.append(scope.conf.field + ': ');
// field input
var field = angular.element('<input type="text" />');
field.attr('name', scope.conf.field);
field.attr('ng-model', 'data.' + scope.conf.field);
if (scope.conf.required) {
field.attr('required', 'required');
}
row.append(field);
// validation
if (scope.conf.required) {
var required = angular.element('<span>required</span>');
required.attr('ng-show',
'form.' + scope.conf.field + '.$error.required');
row.append(required);
}
$compile(row)(scope);
element.append(row);
}
}
});
问题是对字段的验证name不起作用,并且required永远不会显示验证文本.可能在指令form中ng-show未知.但我不知道如何将表单传递给字段指令.你能帮我解决一下吗？谢谢.
这是实时代码:http://plnkr.co/edit/j0xc7iV1Sqid2VK6rMDF？p = preview
小智 5
去做:
之前:
$compile(row)(scope);
element.append(row);
后:
element.append(row);
$compile(row)(scope);
设施'planker'中的p/s添加css:
.ng-invalid {
border: 1px solid red;
}
| 归档时间： |
|
| 查看次数： |
6200 次 |
| 最近记录： |