我制作了一个指令,根据用户添加内容的次数,将内容转换为未知次数。
<loop>
<md-content layout="column" layout-padding>
<h2>Row</h2>
<md-input-container flex class="md-block">
<label>Input</label>
<input ng-model="item.input">
</md-input-container>
<md-input-container flex class="md-block">
<label>Select</label>
<md-select ng-model="item.select">
<md-option ng-repeat="option in options">{{option}}</md-option>
</md-select>
</md-input-container>
</md-content>
</loop>
我希望loop指令中的所有内容都附加在ng-repeat中。我的指令的模板包含一个占位符,所以我可以在自定义转换函数
中编译之前替换内容 <div ng-repeat="item in items">
<placeholder></placeholder>
</div>
<button ng-click="addItem()">Add item</button>
我使用自定义转码功能,没有ngTransclude指令,因为我不想在已转换内容中包含隔离范围,因此我可以更新我的模型。
$templateRequest('template.html').then(function(html) {
var template = angular.element(html);
transclude(scope, function(row) {
template.find('placeholder').replaceWith(row);
$compile(template)(scope, function(clonedTemplate){
element.append(clonedTemplate);
});
});
});
首先,我转换并使用transcluded clone替换模板中的占位符,然后编译我的模板。当我编译md-select中断时。我想因为它已经在转换后编译了。我无法在编译后替换占位符,因为ng-repeat已经编译,没有找到占位符。
See this plnkr for an example。我尽可能地简化了代码。
是否有其他方法可以实现此结果,或者是否有一些我可以更改的内容,因此md-select不会中断。该示例使用md-select,但也有其他自定义指令不起作用。我认为这也是同样的原因。