Boostrap 3：ボタンをクリックしても動作しない

Question

私はAngularJSとTwitter Bootstrapを使用しているWebアプリケーションで作業しています。私のアプリはFirefoxでうまく動作しますが、ChromeやChromium（私の操作システムはUbuntuです）をクリックすると、このクリックは正しく検出されません。クリックは検出されましたが、オブジェクト・イベントはNULLまたは検出されません。ご覧のとおり、evento:だけを書きますが、idは書きません。 Firefoxでは、evento:とidが正しく書き込まれます。

HTML：

<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：

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

私は、エラーをチェックするために同じコードを使用してこのplunkerをしたし、それが動作します：https://plnkr.co/edit/vbBhVCrkpLyRl63Lwlur

私は何も分かりません。プランナーがうまく動作しているのに、なぜ私のWebアプリケーションで動かないのですか？何が起こった？

編集1： 私の目標は、上のオブジェクトのIDを取得することです。 Firefox、Chrome、Chromiumを使用しています。今、イベントのIDはFirefoxによってのみ取得されます。 ChromeとChromiumでは、オブジェクトイベントからIDを取得できないためにイベントが発生します。

編集2： イベント変数がnullであるかどうかを知るために私のコードにトレースを追加しました。クロムでクリックすると、クロムのイベント変数はnullになりませんが、IDは検出されません。

$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にあなたの方法を提供すること$scope（またはディレクティブのscope）を使用する必要がありますあなたがcurrentTargetの代わりで試すことができますtarget。そのためcurrentTargetのそのイベントリスナーの特定のイベント

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

を引き起こしたそれはあなたに役立つかもしれない要素を取得

Answer 2

固定フィドルを見てみましょう：あなたは、コントローラの代わりに、this.checkClick()で$scope.checkClick()を使用する必要があります https://plnkr.co/edit/QftJvAhSYmfq57zknWq8?p=preview

共通場合：

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

をしても意味がありませんhtmlのメソッドをctrl.methodName()のように呼び出します。

あなたはただ行うことができます。

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

しかservicesで許可され、これを使用します。 でもfactoriesにあなたはreturn {a:..., b: function(){...}}構文を使用します（thisを使用しないでください。コントローラまたはディレクティブで

をあなたは