Значение автоматического увеличения в пользовательской директиве

У меня есть проблема, связанная с номером автоматического увеличения в моем настраиваемом шаблоне. Мне нужна функциональность, чтобы добавить динамический 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',
    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-модели как объединения [0], присоединяется [1], присоединяется [2] и так далее. Более конкретно, я не хочу использовать изолированную область здесь.

Любая помощь будет оценена.

Ответ 1

Я считаю, что вам нужно реализовать функцию compile antAddTemplate, чтобы манипулировать шаблоном перед его компиляцией.

Что-то вроде:

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

Ответ 1

Ответ 2