自定義指令中的自動遞增值

Question

我的自定義指令模板中的自動遞增編號有問題。我需要的功能是在按鈕點擊上添加動態HTML內容。

main.html中
<div class="addTemplateContainer{{dataPoint.id}}"></div> <div ant-add-template-button parent="addTemplateContainer{{dataPoint.id}}"></div>

指令 - 螞蟻插件模板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); 
     }); 
    } 
}}); 

指令 - 螞蟻附加template.js

app.directive('antAddTemplate', function() { 
return { 
    restrict: 'A', 
    link: function (scope, element, attrs) { 

    }, 
    templateUrl: '../html/relation-join.html' 
}}]); 

模板 - my-template.html

<select ng-model="joins[$i]" ng-change="myFunc($i)"></select> 

上面的代碼適用於添加HTML內容，但我需要使用數組爲我的ng模型用於選擇&有一些功能，我需要調用每個更改事件的函數。我無法找到每次單擊按鈕時將$ i作爲增量值的方法。
它應該有ng-models作爲連接[0]，連接[1]，連接[2]等。更具體地說，我不想在這裏使用隔離範圍。

任何幫助，將不勝感激。

Answer 1

你可以試試這個，NG點擊會先啓用，然後納克變化將被解僱

Answer 2

我相信你會需要實現的antAddTemplate的compile功能，以操縱模板就被編譯之前。

喜歡的東西：

app.directive('antAddTemplate', function() { 
return { 
    restrict: 'A', 
    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, element, attrs) { 

     }; 
    }, 
    templateUrl: '../html/relation-join.html' 
}}]); 

現在，我們需要通過索引到ant-add-template，所以更新ant-add-button做到這一點：

app.directive('antAddTemplateButton', function ($compile) { 
return { 
    restrict: 'A', 
    link: function (scope, element, attrs) { 
     $(element).on('click', 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); 
     }); 
    } 
}});