Özel yönergede otomatik artış değeri

Question

Özel yönerge şablonumda otomatik artış numarasına ilişkin bir sorunum var. İhtiyacım olan işlevsellik, düğme tıklaması üzerine dinamik HTML içeriği eklemektir.

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

Direktifi - ant-eklentisi şablon 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); 
     }); 
    } 
}}); 

Direktifi - ant-eklentisi template.js

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

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

Template - my-template.html

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

Yukarıdaki kod, HTML içeriği eklemek için iyi çalışıyor ancak select & için kullanılan ng-modelim için diziyi kullanmam gerekiyor; bu nedenle, her değişiklik olayında işlevi çağırmam gereken bazı işlevler var. Düğmeyi tıklattığımda her defasında bir artış değeri olarak $ i almanın bir yolunu bulamıyorum.
Ng-modelleri, birleştirmeler [0], birleştirmeler [1], birleştirmeler [2] vb. Daha spesifik olarak, burada izole kapsamı kullanmak istemiyorum.

Herhangi bir yardım için teşekkür ederiz. Ben bunu derlenmiş önce şablonu işlemek amacıyla antAddTemplate arasında compile işlevi uygulamak gerekir inanıyoruz Bu deneyebilirsiniz

Answer 1

, ng tıklama önce tetiklenir ve daha sonra ng değişim

Answer 2

kovulacak.

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

Şimdi ant-add-template için endeksini geçmesi, böylece yapmak ant-add-button güncellemeniz gerekir:

şey gibi

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