【发布时间】：2014-08-10 13:49:03
【问题描述】：
我正在重新措辞这个问题，因为我认为原文不太清楚。
基本上，我有一个“包装器”指令，我试图在其中动态地将属性添加到包装（转入）元素之一。我可以让它工作，但 Angular 似乎不知道一旦添加了新属性。
如果我使用$compile，那么 Angular 会识别它们——但代价是双重编译嵌入的内容，在这种情况下，它会将 select 标记中的 options 的数量加倍。
Here is a plunker 显示（使用 cmets）我正在尝试的内容，对于那些可以查看代码并仅通过查看提出答案的人来说，下面是相同的代码：
（注意 - 我的最终目标是检查自定义指令 valid-form-group 的 required 属性，如果发现将其应用于包含的 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 除非编译，否则无法识别它。
欢迎任何帮助或 cmets - 我无法让这个工作有点失望，所以也许我缺少一些基本的东西......
plunker 应该有助于可视化我的问题。
edit - 对延迟回复答案和 cmets 表示歉意。正如下面一两条评论中提到的，个人问题使我无法抽出时间进行调查。
【问题讨论】：
-
你不能在项目上加上条件
ng-required：`ng-required="requiredItem"。喜欢建议here -
@Ben - 我在上面的代码示例中有一条评论：//以下任何一个都会产生相同的结果 selectElement.attr('ng-required', true); //selectElement.attr('required', true);不幸的是（虽然这仍然动态添加属性）它仍然没有被 Angular 渲染。注意 - 我在这里使用“必需”作为示例。这可以指任何可能包含需要被 Angular “识别”的内容的指令......
-
您为什么要尝试将这个内部指令包装起来？可以通过这样的简单方式完成plnkr.co/edit/oFyDTa2anUQCLWOkwrW5?p=preview
-
我正在为表单组内容编写一个包装器，其中涉及的内容远不止上述内容（即根据标签信息等动态添加带有相关错误消息的跨度）。但是，我坚持上述概念——而且我并不特别依赖于“包含”或“ng-include”——这只是为了说明我的问题。不过，感谢您的关注-如果您考虑到这一点重新审视这个问题，将不胜感激。它快把我逼疯了！ :)
标签： javascript html angularjs