Auto increment value in custom directive

Question

I have an issue respective to auto increment number in my custom directive template. The functionality I need is to add dynamic HTML content on the button click.

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

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

Directive - 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>

The above code works fine for adding HTML content but I need to use array for my ng-model used for select & there is some functionality for which I need to call the function on each change event. I am unable to find a way for having $i as an increment value for each time I click the button.
It should be having ng-models as joins[0], joins[1], joins[2] an so on. More specifically I don't want to use isolated scope here.

Any help would be appreciated.

Answer 1

I believe you would need to implement the compile function of antAddTemplate in order to manipulate the template before it gets compiled.

Something like:

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

Now we need to pass the index to the ant-add-template, so update ant-add-button to do that:

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