我的自定义指令模板中有自动递增编号的问题.我需要的功能是在按钮上添加动态
HTML内容.
main.html中
< div class =“addTemplateContainer {{dataPoint.id}}”>< / div>
< div ant-add-template-button parent =“addTemplateContainer {{dataPoint.id}}”>< / div>
指令 – ant-add-template-button.js
app.directive('antAddTemplateButton',function ($compile) {
return {
restrict: 'A',link: function (scope,element,attrs) {
$(element).on('click',function () {
var compiledeHTML = $compile('<div ant-add-template></div>')(scope);
$('div.' + attrs.parent).append(compiledeHTML);
});
}
}});
指令 – ant-add-template.js
app.directive('antAddTemplate',function () {
return {
restrict: 'A',attrs) {
},templateUrl: '../html/relation-join.html'
}}]);
Template-my-template.html
<select ng-model="joins[$i]" ng-change="myFunc($i)"></select>
以上代码适用于添加HTML内容,但是我需要使用array作为我的ng模型,用于select&有一些功能,我需要调用每个更改事件的功能.我无法找到一种方法,每当我点击按钮$i作为增量值.
它应该有ng模型作为连接[0],连接[1],连接[2]等等.更具体地说,我不想在这里使用孤立的范围.
任何帮助将不胜感激.
解决方法
我相信你需要实现antAddTemplate的编译功能,以便在编译之前操纵模板.
就像是：
app.directive('antAddTemplate',compile: function(element,attrs) {
// dynamically set the ng-model attribute by using the index supplied
element.find('select')
.attr('ngModel','joins['+attrs.index+']')
.attr('ngChange','myFunc('+attrs.index+')');
// return the link function (the function that would be declared with link: property when compile: is not being used)
return function linkFunction (scope,attrs) {
};
},templateUrl: '../html/relation-join.html'
}}]);
现在我们需要将索引传递给ant-add-template,所以更新ant-add-button来做到这一点：
app.directive('antAddTemplateButton',function () {
// add a new index to the joins array
var index = scope.joins.push() - 1;
// compile ant-add-template with an index attribute
var compiledeHTML = $compile('<div ant-add-template index="'+index+'"></div>')(scope);
$('div.' + attrs.parent).append(compiledeHTML);
});
}
}});
