AngularJS ng-click not working

Question

So i'm taking a stab at learning AngularJS starting this weekend and one thing I can't quite get to work is the ng-click functionality, could anyone offer a suggestion as to why its not working along with any general advice on anything i've done wrong?

To be clear the dropdown gets filled fine, I want to be able to catch a click for the items on it!

The HTML:

<html ng-app="slotDemo">

  <div ng-app ng-controller="gameList" >
        <div class="dropdown">
           <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="false">
    Please Pick a Game
    <span class="caret"></span>
  </button>

  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li ng-repeat="slot in slots" role="presentation" ng-click="gameList.fetchGame(slot.id)"><a role="menuitem" href="#">{{slot.id}} {{slot.name}}</a></li>
  </ul>
  </div>

</div>

And the javascript:

var slotDemo = angular.module('slotDemo', [])
        .controller('gameList', gameList1);

function gameList1($scope, $http){
          $scope.slots = [];
          $http({
          method: 'GET',
          url: 'http://localhost/api/machine/list'
          }).success(function(data){
              $scope.slots = data;
          }).error(function(){
              alert("Error");
          });

          $scope.fetchGame = function(id){
              // Fetch the HTML for the slot we just clicked on...
              $scope.machineDetails = [];
              alert("oi");
              $http({
          method: 'GET',
          url: 'http://localhost/api/machine/get/' + id
          }).success(function(data){
                  $scope.machineDetails = data;
          }).error(function(){
              alert("Unable to retrieve slot machine information.");
          });
        };
    }

Drop the gameList prefix and this should work: ng-click="fetchGame(slot.id)" — Amir Popovich
– Amir Popovich, Commented Nov 15, 2014 at 19:12
Ohhh my god...... how much of an idiot do I feel, if you post with an answer i'll mark it. — Mrk Fldig
– Mrk Fldig, Commented Nov 15, 2014 at 19:13

Amir Popovich · Accepted Answer · 2014-11-15 19:14:41Z

2

You need to drop the gameList prefix:

ng-click="fetchGame(slot.id)"

Otherwise angular will look for a gameList object(with a fetchGame method) on your scope and you dont have one.

answered Nov 15, 2014 at 19:14

Amir Popovich

30.1k9 gold badges58 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mrk Fldig Over a year ago

Ok but thats what I don't get that controller is in scope no?

Amir Popovich Over a year ago

The scope object is injected in the controller function. You add a ng-controller to your html element to tell it who is your controller and from there on your current object is the scope. When you wrote ng-repeat="slot in slots" where do you think it took the slots reference? It took it from $scope.slots.

Mrk Fldig Over a year ago

Ahhhh, gotcha I was getting it backward. Thanks for you're help will mark as correct asap.

Collectives™ on Stack Overflow

AngularJS ng-click not working

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related