我有一个角度指令,它将生成引导程序表单组,查找 $scope.errors 来查找指令的 ng-model 值以显示错误。下面的示例:
我的html代码:
<input type="text" b-input ng-model="data.company.name" label="Company Name" class="form-control"/>
和我的指令代码:
app.directive('bInput', function ($compile) {
return {
restrict: 'EA',
replace: true,
link: function (scope, element, attrs) {
var div = $('<div>', {
'class': 'form-group',
'ng-class': " 'has-error' : errors." + attrs.ngModel + " != null "
});
$compile(div)(scope);
element.wrap(div);
if (attrs.label != undefined) {
element.before('<label for="' + attrs.name + '" class="control-label">' + attrs.label + '</label>');
element.removeAttr('label');
}
}
};
});
你能解释一下我如何达到预期的结果吗?
修改指令的编译 fn 内的元素,因为 DOM 是普通的。然后在从编译函数返回的链接函数中重新编译该元素。
Code
app.directive('bInput', function($compile) {
return {
restrict: 'EA',
replace: true,
compile: function(element, attrs) {
var div = $('<div>', {
'class': 'form-control',
'ng-class': " 'has-error' : errors." + attrs.ngModel + " != null "
});
element.wrap(div);
if (attrs.label != undefined) {
element.before('<label for="' + attrs.name + '" class="control-label">' + attrs.label + '</label>');
element.removeAttr('label');
}
element.removeAttr('b-input');
return function(scope, element, attrs) {
var linkFn = $compile(element);
linkFn(scope)
}
};
});
看看类似的所以在这里回答
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)