I'm working on a web application which uses AngularJS and Twitter Bootstrap. My app works fine with Firefox, but with Chrome or Chromium (my operation system is Ubuntu) when I click button, this click is not detected correctly. The click is detected but the object event is null or is not detected. As you can see, it only writes evento:
but not the id
. In Firefox it writes evento:
and the id
correctly.
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();
}
}
I have made this plunker using the same code to check the error and it works: https://plnkr.co/edit/vbBhVCrkpLyRl63Lwlur
I don't understand anything. Why is it not working in my web application while in the plunker works fine? What happend?
Edit 1 : My goal is to get the id of the object over I have made a clic. With Firefox, Chrome and Chromium. Right now, the id from the event is retrieved only by Firefox. With Chrome and Chromium the event is fired by I can't retrieve the id from the object event.
Edit 2: I have added a trace to my code to know is event variable is null or not and when I make click in Chrome o Chromium event variable is not null but the id is not detected!!!
$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();
}
}
You can try by currentTarget
instead of target
. Because of currentTarget
get the element whose event listeners triggered a specific event
self.changeView = function(event) {
console.log("evento: " + event.currentTarget.id);
};
It may help you
Take a look at fixed fiddle: https://plnkr.co/edit/QftJvAhSYmfq57zknWq8?p=preview
In common case you should use $scope.checkClick()
in controllers instead of this.checkClick()
:
$scope.checkClic = function(obj) {
console.log("obj: " + obj);
};
and there is no point to call method in html like ctrl.methodName()
.
You can just do:
<button ng-click = "checkClick('Button Clicked!!!')">
Using this allowed only at services
. Even in factories
you shouldn't use this
(use return {a:..., b: function(){...}}
syntax.
In controllers or directives you should use $scope
(or scope
for directives) to provide your methods to html
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.