Brandon Kindred Brandon Kindred - 1 month ago 6
AngularJS Question

AngularJS - ng-click isn't firing with JQuery Mobile

I'm trying to apply what little I've learned so far about AngularJS to a simple mobile app the renders using JQuery Mobile. I've looked into Angular Mobile but haven't found much useful documentation or a mature library which makes sense since Angular is still quite young. Anyhow, my issue is that I'm trying to load an object when a listItem is clicked, but it doesn't even look like the ng-click directive is actually doing anything. I've even tried just logging to the console to show it is in fact triggering, but no dice.

Here is what I have so far.

Template:

<div data-role="page" id="mushroom-list" ng-controller="MushroomListCtrl">
<div data-role="content" >
<ul data-role="listview" data-divider-theme="b" data-inset="true" class="mushrooms">
<li data-theme="c" ng-repeat="mushroom in mushrooms | filter:query | orderBy:orderProp">
<a href="#mushroom-detail" data-transition="slide" ng-click="selectMushroom({{mushroom._id}})" value="{{mushroom._id}}">
{{mushroom.variety}}
</a>
</li>
</ul>
</div>
</div>


Controller:

function MushroomListCtrl($scope, Mushroom) {
$scope.mushrooms = Mushroom.query();

$scope.selectMushroom = function (id) {
$scope.mushroom = _.where($scope.mushrooms, {_id: id})[0];
}
}

gardenApp.controller('MushroomListCtrl', ['$scope', 'Mushroom', MushroomListCtrl])


I'm not sure if it's a conflict with JQuery Mobile or if I'm just showing how much of a noob I am with AngularJS. Can anyone shed some light on exactly why it wouldn't seem like the selectMushroom() function is evaluating when I click on the link. I've looked high and low for about 2 days now and it's become a little frustrating. Also I'm currently using AngularJS 1.0.2, jQuery 1.9.1, and jQuery Mobile 1.3.1. I've also tried adding the latest versions of angular-mobile-nav and ng-mobile.js hoping that it would fix the issue. But clearly it didn't.

Answer

Ok I figured it out I think. First I moved the ng-controller directive to the body tag and removed the declarations from the div tag for page. Then I replaced ._id with .id in the template and controller, and voila it works.

Template

<body ng-controller="MushroomListCtrl">

<div data-role="page" id="mushroom-list" >
   <div data-role="content" >
       <ul data-role="listview" data-divider-theme="b" data-inset="true" class="mushrooms">
           <li data-theme="c" ng-repeat="mushroom in mushrooms | filter:query | orderBy:orderProp">
               <a href="#mushroom-detail" data-transition="slide" ng-click="selectMushroom(mushroom.id)" value="{{mushroom.id}}"> 
                    {{mushroom.variety}}
                </a>
            </li>
        </ul>
    </div>
</div>

</body>

Controller

function MushroomListCtrl($scope, Mushroom) {
    $scope.mushrooms = Mushroom.query();

    $scope.selectMushroom = function (id) {
        $scope.mushroom = _.where($scope.mushrooms, {id: id})[0];
    }
}