Boostrap 3: Tıklama düğmesi çalışmıyor

Question

AngularJS ve Twitter Bootstrap kullanan bir web uygulamasında çalışıyorum. Uygulamam Firefox ile sorunsuz çalışıyor, ancak bu düğmeyi tıkladığımda Chrome veya Chromium (işletim sistemim Ubuntu'dur) ile bu tıklama doğru şekilde algılanmadı. Tıklama algılandı, ancak nesne olayı boş veya algılanmadı. Gördüğünüz gibi, sadece evento: yazıyor, ancak id değil. Firefox'ta evento: ve id doğru yazar.

HTML: Ben hatayı kontrol etmek aynı kodu kullanarak bu plunker yaptık

self.changeView = function(event){ 
    console.log("evento: " + event.target.id); 
    if (event.target.id == "removeLeftTables"){ 
     self.show_left_tables = false; 
     self.style_left_content = ""; 
     self.style_right_content = ""; 
     self.style_tables_content = "";  
     self.cleanTabStyles(); 
    } 

    if (event.target.id == "removeRightTables"){ 
     self.show_right_tables = false; 
     self.style_right_content = ""; 
     self.style_left_content = ""; 
     self.style_tables_content = ""; 
     self.cleanTabStyles(); 
    } 
} 

ve işe yarıyor:

<button id = "removeLeftTables" ng-click = "hmCtrl.changeView($event)"> 
    <span class="glyphicon glyphicon-remove " aria-hidden="true" style = "vertical-align: middle; font-size: 25px"></span> 
</button> 

JS https://plnkr.co/edit/vbBhVCrkpLyRl63Lwlur

Hiçbir şey anlamıyorum. Web uygulamamda neden çalışmıyor çünkü plunker çalışırken iyi çalışıyor? Ne oldu?

Düzeltme 1: Amacım, nesnenin kimliğini almak için bir clic yaptık. Firefox, Chrome ve Chromium ile. Şu anda, etkinliğin kimliği sadece Firefox tarafından alınır. Chrome ve Chromium ile etkinlik tetiklendiğinde, nesne olayından kimliği alamıyorum.

Düzenleme 2: Biliyorum benim koduna iz eklemiş olay değişken null veya değil ve ben Chrome'da tıklayın yaparken Krom o olay değişken boş değil ise ancak kimlik tespit edilmez !!!

$scope.changeView = function(event){ 
    if (event == null) 
     console.log("event is NULL"); 
    else 
     console.log("event IS NOT NULL"); 
    console.log("evento: " + event.target.id); 
    if (event.target.id == "removeLeftTables"){ 
     self.show_left_tables = false; 
     self.style_left_content = ""; 
     self.style_right_content = ""; 
     self.style_tables_content = "";  
     self.cleanTabStyles(); 
    } 

    if (event.target.id == "removeRightTables"){ 
     self.show_right_tables = false; 
     self.style_right_content = ""; 
     self.style_left_content = ""; 
     self.style_tables_content = ""; 
     self.cleanTabStyles(); 
    } 
} 

Answer 1

html yöntemlerinizi sağlamak için direktifler için $scope (veya scope) kullanması gerekir yönergelerde

Sen currentTarget yerine göre deneyebilirsiniz target.Çünkü currentTarget ait olan olay dinleyicileri belirli bir olayı

self.changeView = function(event) { 
    console.log("evento: " + event.currentTarget.id); 
}; 

tetiklenen Size yardımcı olabilecek eleman almak

Answer 2

sabit keman bir göz atın: Eğer denetleyicileri yerine this.checkClick() yılında $scope.checkClick() kullanmalıdır https://plnkr.co/edit/QftJvAhSYmfq57zknWq8?p=preview

ortak durumunda:

$scope.checkClic = function(obj) { 
    console.log("obj: " + obj); 
}; 

ve anlamı yok ctrl.methodName() gibi html yöntemini çağırmak için.

Sen tıpkı yapabilirsiniz:

<button ng-click = "checkClick('Button Clicked!!!')"> 

bu sadece services izin kullanma. bile factories size this (kullanım return {a:..., b: function(){...}} kullanmamalısınız sözdizimi. Kontrolörleri veya