Wartość automatycznego przyrostu w dyrektywie niestandardowej

Question

Mam problem związany z automatycznym numerem inkrementacji w moim szablonie dyrektywy niestandardowej. Potrzebuję funkcji dodawania dynamicznej treści HTML po kliknięciu przycisku.

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

dyrektywa - 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); 
     }); 
    } 
}}); 

dyrektywy - ant-add-template.js

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

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

szablonu - my-template.html

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

Powyższy kod działa poprawnie przy dodawaniu treści HTML, ale potrzebuję użyć tablicy dla mojego modelu ng używanego do wyboru &, istnieje pewna funkcjonalność, do której muszę wywołać funkcję w każdym zdarzeniu zmiany. Nie mogę znaleźć sposobu na uzyskanie wartości $ i jako wartości przyrostu za każdym razem, gdy kliknę przycisk.
Powinien mieć modele ng jako sprzężenia [0], łączy [1], łączy [2] i tak. Dokładniej, nie chcę tutaj używać izolowanego zakresu.

Każda pomoc zostanie doceniona.

Answer 1

Można spróbować, ng kliknięcie będzie pierwszy zwolniony i zmiana następnie ng zostanie zwolniony

Answer 2

wierzę, że trzeba zaimplementować funkcję compile z antAddTemplate w celu manipulowania szablon zanim zostanie skompilowany.

Coś jak:

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' 
}}]); 

Teraz musimy przekazać wskaźnik do ant-add-template, więc aktualizować ant-add-button to zrobić:

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); 
     }); 
    } 
}});