ng-click 이벤트가 여러 번 트리거 됨

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()

입니다. 행 중 하나에서 시식 노트 표시를 탭하면 6 번 실행됩니다. 시음회와 와인은 올바른 행에서 나온 것입니다. 단지 모두가 여러 번 (6 번) 해고된다는 것을 알아낼 수 없습니다.

이 내 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(); 
      }); 
    }; 

내가 그것을 만드는 모든 탭 6 번이 인쇄 가지고있는 console.log.

이 코드는 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에서 첫 번째 행을 클릭하면 함수가 한 번만 실행되지만 클릭하면 예를 들어 DOM에서 두 번째 함수는 두 번 실행됩니다. 따라서 어떤 이유로 연속 된 각 행에 대한 바인딩은 해당 행에 대한 바인딩을 증가시킵니다. 나는 html 구조를 점검하여 일부 누락/불필요한 닫는 태그가 아니라는 것을 확신하지만 이는 사실이 아닙니다.

Answer 1

문제를 발견했으며 예상치 못한 부분이었습니다. 문제는, 나는 그것이 (행의 부모 인)은 $ 섹션 감싸 갖는 $compile

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

을 사용하는 방법에 상륙 각 연속 행에 추가 클릭 리스너를 추가했다. 앞쪽에 붙인 wineRowTemplate 주위에 배치하여 문제를 해결했습니다.

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