Menu
Why is the passed $event object in the toggleDropdown function undefined?
This is the original code from: http://plnkr.co/edit/koNsQycAAiEmI8jBApS2?p=preview
except that the original code does not have the toggleDropdown function in the button-tag defined. I did this because the original code does NOT open the dropdown on my computer.
I use angularjs 1.3.2 and angularjs-bootstrap 0.11.2
'use strict';
angular.module('auth').controller('AccountController', function ($scope) {
$scope.status = {
isopen: false
};
$scope.toggleDropdown = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.status.isopen = !$scope.status.isopen;
};
});
<!-- Single button -->
<div class="btn-group" dropdown is-open="status.isopen">
<button ng-click="toggleDropdown()" type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle ng-disabled="disabled">
Button dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
379
ng-click is an attribute of an HTML element that can be used for the customized components in Angular. We use this attribute to detect if an element is clicked and tracks the mouse's cursor. ng-click takes a function as an attribute and calls it whenever an element is clicked.
Angular includes $event that contains the information about an event. The type of $event depends on the target event, e.g., if the target event is a native DOM element event, then it is an object. A component should define the onShow(event) method where the type of the parameter can be KeyboardEvent, MouseEvent, etc.
Another significant difference between ng-click and onclick is the execution context. Code inside an onclick attribute executes against the global window object, while an expression inside of ng-click executes against a specific scope object, typically the scope object representing the model for the current controller.
The ng-click directive tells AngularJS what to do when an HTML element is clicked.
You have to explicitly specify that you are passing the $event variable:
<button ng-click="toggleDropdown($event)">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
