javascript - 自定义指令中的自动增量值

Question

我的自定义指令模板中有一个关于自动递增数字的问题。我需要的功能是在单击按钮时添加动态 HTML 内容。

主.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-model 使用数组，并且有一些功能我需要在每个更改事件上调用该函数。每次单击按钮时，我都找不到将 $i 作为增量值的方法。
它应该有 ng-models 作为 joins[0]、joins[1]、joins[2] 等等。更具体地说，我不想在这里使用隔离范围。

如有任何帮助，我们将不胜感激。

Answer 1

我相信您需要实现 antAddTemplate 的 compile 函数，以便在模板编译之前对其进行操作。

类似于:

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