Question

我的自定义指令模板中的自动增量编号各有一个问题。我需要的功能是在按钮点击上添加动态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-model用于select＆amp;有一些功能我需要在每个更改事件上调用该函数。每次单击按钮时，我都无法找到将$ i作为增量值的方法它应该有ng-models作为连接[0]，连接[1]，连接[2]等等。更具体地说，我不想在这里使用孤立的范围。

任何帮助都将不胜感激。

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

Answer 2

你可以尝试这个，首先点击ng点击，然后点击更改

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

2 个答案: