Question

我有一个模板可以重复显示包含不同数据的行。该模板还包含与该行相关的$scope函数。

<script id="wineRowTemplateT" type="text/html" style="display: none;">
    <div class="row tasting" style="margin-bottom: 15px;">
        <div class="col col-10">
            <div class="rating" style="display: block; width: 60px; height: 60px; text-align: center; line-height: 60px; font-weight: 700; border: thin solid #ccc; border-radius: 50%; font-size: 1.2em;">{tasting_points}p</div>
        </div>
        <div class="col col-90">
            <div class="row info">
                <div class="col col-70">
                    <h3 style="font-weight: 300; border-bottom: thin solid #000; display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                        <span ng-click="smGoto('http://dev.thetastingbook.com/p/{house_url}', 'external')" style="font-weight: 600;">{house_name}</span>
                        <span ng-click="smGoto('http://dev.thetastingbook.com/wine/{house_url}/{wine_url}', 'external')">{wine_name}</span> {wine_vintage}
                    </h3>
                </div>
                <div class="col col-30">
                    <h4 ng-click="showTastingAdjectivesModal($event)" data-tasting-id="{tasting_id}" data-wine-id="{wine_id}" style="font-weight: 300; text-transform: uppercase; text-decoration: underline;">Show tasting note</h4>
                </div>
            </div>
        </div>
    </div>
</script>

有问题的功能是showTastingAdjectivesModal()

在我的测试用例中，我从模板中创建了六行。当我尝试在其中一行上点击Show Tasting Note时，它会触发六次。 tastingId和wineId来自正确的行，只是它被触发了多次（六次）并且我无法弄清楚导致它的原因。

这是我的showTastingAdjectivesModal（）函数：

$scope.showTastingAdjectivesModal = function (cEvent) {
    console.log("showNoteModal called");
    var $this = $(cEvent.toElement);
    var tastingId = $this.data("tastingId");
    var wineId = $this.data("wineId");

        Tasting.getTastedWineAdjectives(tastingId, wineId)
            .then(function(adjectives){
                console.log("Got adjectives", JSON.stringify(adjectives));
                adjectives.forEach(function(adj){
                    var type = adj.type;
                    if(type == "drink")
                        type = "conclusion";

                    $(".tasting-adjective-row[data-type='"+type+"']").find(".adjectives").append(adj.name + ", ");
                });

                $scope.noteModal.show();
            });
    };

我所拥有的console.log每次点击都会打印6次。

另外注意，此代码在iOS设备上使用带有Ionic / AngularJS的Cordova运行。

有谁可以告诉我，我可能做错了什么？

以下是模板的用法：

var res = obj.res;
var stats = obj.stats;
section = {abbr: "", proper: ""};

tastingDate = moment(tasting.tasting_date);

if (tastingDate.isAfter(moment().startOf("isoweek")) || tastingDate.isSame(moment().startOf("isoweek"))) {
    section.abbr = "week";
    section.proper = "This Week";
} else if (tastingDate.isAfter(moment().subtract(1, "weeks").startOf("isoweek")) || tastingDate.isSame(moment().subtract(1, "weeks").startOf("isoweek"))) {
    section.abbr = "lastweek";
    section.proper = "Last Week";
} else {
    section.abbr = tastingDate.format("W");
    section.proper = "Week " + tastingDate.format("W");
}

var wineRowTemplate = $("#wineRowTemplateT").html();
wineRowTemplate = wineRowTemplate.split("{tasting_id}").join(tasting.id);
wineRowTemplate = wineRowTemplate.split("{wine_id}").join(res.id);
wineRowTemplate = wineRowTemplate.split("{tasting_points}").join(tasting.score);
wineRowTemplate = wineRowTemplate.split("{house_name}").join(res.house_name);
wineRowTemplate = wineRowTemplate.split("{house_url}").join(res.winehouse_url_name);
wineRowTemplate = wineRowTemplate.split("{wine_name}").join(res.name);
wineRowTemplate = wineRowTemplate.split("{wine_url}").join(res.wine_url_name);
wineRowTemplate = wineRowTemplate.split("{wine_vintage}").join(res.vintage);
wineRowTemplate = wineRowTemplate.split("{last_tasted}").join(tastingDate.fromNow());
wineRowTemplate = wineRowTemplate.split("{overall_total}").join(stats.total);
wineRowTemplate = wineRowTemplate.split("{overall_average}").join(stats.average);
wineRowTemplate = wineRowTemplate.split("{overall_best}").join(stats.highest);
wineRowTemplate = wineRowTemplate.split("{overall_lowest}").join(stats.lowest);
wineRowTemplate = wineRowTemplate.split("{tb_point}").join(parseInt(res.tb_points, 10).toFixed(2));
wineRowTemplate = wineRowTemplate.split("{wine_note}").join(tasting.note);


if (!$sections.find(".section[data-section='" + section.abbr + "']").length) {
    var sectionTemplate = $("#sectionTemplate").html();
    sectionTemplate = sectionTemplate.split("{section_name_abbr}").join(section.abbr);
    sectionTemplate = sectionTemplate.split("{section_name_proper}").join(section.proper);
    $sections.append(sectionTemplate);
}

console.log("[TASTING] Inserting data to view for wine ID", tasting.wine_id);
$compile($sections.find(".section[data-section='" + section.abbr + "'] .tastings").prepend(wineRowTemplate))($scope);

更新：我注意到，例如，我点击DOM中的第一行ng-click，该功能只被触发一次，但如果我点击例如在DOM中的第二个，该函数被触发两次。因此，由于某种原因，每个连续行的绑定会增加对该行ng-click的绑定。我检查了我的html结构，以确定它不是一些遗漏/不必要的结束标签，但事实并非如此。

Answer 1

我发现了这个问题，这是你最不期望的。问题归结于我如何使用$compile

$compile($sections.find(".section[data-section='" + section.abbr + "'] .tastings").prepend(wineRowTemplate))($scope);

将它包裹在$ section（它是行的父级）周围，为每个连续的行添加了一个额外的单击侦听器。通过将它放在前面的wineRowTemplate周围修复了问题

$sections.find(".section[data-section='" + section.abbr + "'] .tastings").prepend($compile(wineRowTemplate)($scope));

多次触发ng-click事件

1 个答案: