我正在重写这个问题,因为我认为原文并不太清楚.
基本上,我有一个’wrapper’指令,我试图动态地将属性添加到一个包装(transcluded)元素.我可以让它工作,但Angular似乎并没有意识到添加后的新属性.
如果我使用$compile,那么Angular会识别它们 – 但是以双重编译被转换的内容为代价,在这种情况下它会使select标签中的选项数量翻倍.
Here is a plunker显示(带注释)我正在尝试的内容,下面是相同的代码,对于那些可以查看代码并通过查看建议答案的人：
(注意 – 我的最终目的是检查所需属性的自定义指令valid-form-group,如果找到将其应用于包含的select标记)
HTML
<body ng-controller="MainCtrl">
<form name="validationForm" novalidate>
<valid-form-group class="form-group" ng-class="{'has-error': validationForm.validInfo.$error.required}" required>
<select ng-model="data.option" ng-options="option.id as option.message for option in selectOptions" name="validInfo" id="validInfo">
<option value="">-- Select a Question --</option>
</select>
</valid-form-group>
</form>
</body>
JS
var app = angular.module('plunker',[])
.controller('MainCtrl',function($scope) {
$scope.selectOptions = [
{id: 1,message: 'First option'},{id: 2,message: 'Second option'},{id: 3,message: 'Third option'}
];
})
.directive('validFormGroup',function($compile) {
return {
restrict: 'E',template: '<div><span ng-transclude></span></div>',replace: true,transclude: true,require: '^form',link: function(scope,element,attrs,ctrl) {
if (attrs.required !== undefined) {
var selectElement = angular.element(element.find('select'));
// either of the below produce the same results
selectElement.attr('ng-required',true);
//selectElement.attr('required',true);
// if the below is commented out it wont validate
// BUT if it is left in it will recompile and add another 3 options
$compile(selectElement)(scope);
}
}
};
});
CSS
.has-error{
border: solid 1px red;
}
请注意,此处的示例使用“required”(或ng-required)作为添加的属性,以突出显示除非编译,Angular不会识别它的事实.
欢迎任何帮助或评论 – 有点失望,我不能让这个工作,所以也许有一些基本的我缺少…
plunker应该有助于可视化我的问题.
解决方法
试试这个简单的指令：
.directive('validFormGroup',function($compile) {
return {
restrict: 'A',replace: false,compile: function (element,attr) {
if (attr.required !== undefined) {
var selectElement = element.find('select');
// either of the below produce the same results
selectElement.attr('ng-required',true);
//selectElement.attr('required',true);
}
}
};
});
并将其用作html属性：
<div valid-form-group class="form-group" ng-class="{'has-error': validationForm.validInfo.$error.required}" required>
<select ng-model="data.option"
ng-options="option.id as option.message for option in selectOptions"
name="validInfo" id="validInfo" >
<option value="">-- Select a Question --</option>
</select>
<br/>
<br/>required invalid? {{validationForm.validInfo.$error.required||false}}
<br/>
<br/>
</div>
说明：
>我在这个解决方案中根本没有使用transclude,因为这个指令的目的只是在用作用域编译之前修改html,不需要过于复杂的被转换内容.>这里我处理编译函数而不是链接函数.编译函数是一个很好的地方,你可以在链接到范围之前修改html.
