我正在重写这个问题，因为我认为原来的问题不太清楚。
基本上，我有一个“包装器”指令，我试图将属性动态添加到包装（嵌入）元素之一。我可以让它工作，但 Angular 似乎不知道添加后的新属性。
如果我使用$compile那么 Angular 确实会识别它们 - 但代价是双重编译嵌入的内容，在这种情况下，它的数量会加倍options in the select tag.
这是一个笨蛋 http://plnkr.co/edit/Qa0vx0swMDVujtN7toXX?p=preview显示（带有注释）我正在尝试的内容，下面是相同的代码，供那些可以查看代码并通过查看提出答案的人使用：
（注意 - 我的最终目标是检查自定义指令valid-form-group为了required属性，如果发现将其应用于包含的select tag)
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' (or ng-required) 作为添加的属性，以强调 Angular 除非编译，否则无法识别它。
欢迎任何帮助或评论 - 有点失望我无法让它发挥作用，所以也许我缺少一些基本的东西......
The plunker http://plnkr.co/edit/Qa0vx0swMDVujtN7toXX?p=preview应该有助于形象化我的问题。
edit- 对于延迟回复答案和评论表示歉意。正如下面一两条评论中提到的，个人问题使我无法抽出时间进行调查。
