Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

$event passed with ng-click is undefined

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>
like image 379
Pascal Avatar asked Dec 12 '14 17:12

Pascal


People also ask

What does ng-click do?

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.

What type is $event angular?

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.

What is the difference between Ng-click and Onclick?

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.

What is data Ng-click?

The ng-click directive tells AngularJS what to do when an HTML element is clicked.


Video Answer


1 Answers

You have to explicitly specify that you are passing the $event variable:

<button ng-click="toggleDropdown($event)">
like image 137
New Dev Avatar answered Oct 07 '22 21:10

New Dev