$event passed with ng-click is undefined

Question

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>

score 13 · Accepted Answer · answered Dec 12 '14 at 17:57

13

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

<button ng-click="toggleDropdown($event)">

answered Dec 12 '14 at 17:57

New Dev

48,427
12
87
129

can you tell me also why the original plunker from angular-ui does not use the toggleDropdown function but still works! ??? Thats weird...Thanks with the passed $event it works, i thought angular would inject the event :P – Pascal Dec 12 '14 at 18:02
What do you mean? In the plunker you specified the button has `$event` being passed – New Dev Dec 12 '14 at 18:08
It does, when you specify where to inject. `$event` is a pseudo-variable injected by `ng-click`. – New Dev Dec 12 '14 at 18:10
"What do you mean" => I speak of the 2nd problem which is that the plunker does not use the toggleDropdown function in the HTML but the dropdown still opens when you click on it. you get it? – Pascal Dec 12 '14 at 20:52
In the plunker, the actual toggle button has a directive `dropdown-toggle` applied to - that's why it opens. If I misunderstood, can you reduce the code in the plunker to illustrate your question? – New Dev Dec 12 '14 at 21:21
Locally on my pc the dropdown does not open. it seems the directive is not working... but I get no errors. Any idea? – Pascal Dec 12 '14 at 21:24
Did you add the js file where the directive is defined? Did you add it as a dependency on your app's module? Without you reproducing the issue in the plunker there is not much I can do to help. If you face a different issue, I suggest creating a different question. – New Dev Dec 12 '14 at 21:37
ok it seems my angular-bootstra.js is outdated because the dropdownToggle directive in my version has this set: restrict: 'CA', the latest version has this not... – Pascal Dec 12 '14 at 21:37

score -2 · Answer 2 · answered Dec 12 '14 at 18:08

-2

Looks to me like you need to have jQuery loaded as well to get a meaningful event object. See my fork of your plunk: http://plnkr.co/edit/ZpQuz1?p=preview

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

answered Dec 12 '14 at 18:08

rayners

539
2
13

1

I can not retrace why you would need jquery. Everything in the plunker works fine without... – Pascal Dec 12 '14 at 20:51

$event passed with ng-click is undefined

2 Answers2