Giá trị gia tăng tự động trong chỉ thị tùy chỉnh

Question

Tôi gặp sự cố tương ứng với số tăng tự động trong mẫu chỉ thị tùy chỉnh của tôi. Chức năng tôi cần là thêm nội dung HTML động vào nút bấm.

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

Chỉ thị - 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); 
     }); 
    } 
}}); 

Chỉ thị - ant-add-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> 

Đoạn mã trên hoạt động tốt để thêm nội dung HTML nhưng tôi cần sử dụng mảng cho mô hình ng của tôi được sử dụng để chọn & có một số chức năng mà tôi cần gọi hàm trên mỗi sự kiện thay đổi. Tôi không thể tìm cách để có $ i làm giá trị gia tăng cho mỗi lần tôi nhấp vào nút.
Cần có các mô hình ng như tham gia [0], tham gia [1], tham gia [2] một lần nữa. Cụ thể hơn, tôi không muốn sử dụng phạm vi cô lập ở đây.

Mọi trợ giúp sẽ được đánh giá cao.

Answer 1

Bạn có thể thử này, ng nhấp chuột sẽ bị sa thải đầu tiên và sau đó ng thay đổi sẽ bị sa thải

Answer 2

Tôi tin rằng bạn sẽ cần phải thực hiện các compile chức năng của antAddTemplate để thao tác các mẫu trước khi nó được biên soạn.

Cái gì như:

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

Bây giờ chúng ta cần phải vượt qua chỉ số để các ant-add-template, vì vậy cập nhật ant-add-button để làm điều đó:

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