编译动态内容 - AngularJS [英] Compiling dynamic content - AngularJS
问题描述
我想起了当初是不是太清楚，我重新措辞这个问题。
I'm rewording this question as I think the original wasn't too clear.
基本上，我有一个'包装'指令在那里我试图动态属性添加到包（transcluded）元素之一。我能得到这个工作，但角度似乎并没有意识到，一旦添加了新的属性。
Basically, I have a 'wrapper' directive where I am attempting to dynamically add attributes to one of the wrapped (transcluded) elements. I can get this to work, but Angular doesn't seem to be aware of the new attributes once added.
如果我用 $编译然后角不认识他们 - 但以牺牲双编译transcluded内容，而在这种情况下，再增加一倍的数量选项在选择标记。
If I use $compile then Angular does recognise them - but at the expense of double-compiling the transcluded content, and in this case it then doubles the number of options in the select tag.
这里是一个plunker 该节目（含评论）我是什么尝试，下同code如下对于那些谁可以看看code和暗示答案只是看：
（注意 - 我的最终目的是检查自定义指令有效形式的组为要求属性，如果发现其应用到包含选标记）
Here is a plunker that shows (with comments) what I am attempting, and the same code follows below for those who can look at code and suggest an answer just by looking:
(note - my ultimate aim is to check the custom directive valid-form-group for the required attribute, and if found to apply it to the contained 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;
}
请注意，这里的样品是使用'要求（或 NG-要求）作为添加的属性突出显示角度不承认它，除非编制的事实。
Please note that the sample here is using 'required' (or ng-required) as the added attribute to highlight the fact that Angular does not recognise it unless compiled.
任何帮助或意见，欢迎 - 有点失望，我不能得到这个工作，所以也许还有什么我失踪根本...
Any help or comments are welcome - a bit disappointed that I can't get this to work, so perhaps there's something fundamental I'm missing...
借助 plunker 应该有助于可视化我的问题。
The plunker should help with visualising my problem.
修改 - 道歉在应对答案和注释的延迟。作为评论或两个以下提到，个人问题有$ P $从能够找到，调查时间pvented我。的
edit - apologies for the delay in responding to the answers and comments. As mentioned in a comment or two below, personal issues have prevented me from being able to find the time to investigate.
推荐答案
试试这个简单的指令：
.directive('validFormGroup', function($compile) {
return {
restrict: 'A',
replace: false,
require: '^form',
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属性：
And use it as html attribute:
<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 之前与范围编译，就没有必要为transcluded内容被过分复杂。
I don't use
transcludeat all in this solution as the purpose of this directive is just to modify the html before compiling with the scope, there is no need for transcluded content which is overly complicated.
下面我办理编译函数代替链接功能。 编译函数是一个伟大的地方，你可以在连接到示波器之前修改HTML
Here I handle the compile function instead of the link function. compile function is a great place for you to modify html before linking to the scope.
这篇关于编译动态内容 - AngularJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
