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

Question

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.

Jared Reeves · Accepted Answer · 2013-10-24 18:06:11Z

1

You can get the two to work together, but there are some issues. Check out this site for a good explanation.

http://simonguest.com/2013/04/08/jquery-mobile-and-angularjs-working-together/

Also I think that you need to remove the {{ }} from the click event. try this;

ng-click="selectMushroom(mushroom._id)"

edited Oct 24, 2013 at 18:06

answered Oct 24, 2013 at 18:00

Jared Reeves

1,3902 gold badges15 silver badges29 bronze badges

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

3 Comments

Brandon Kindred Over a year ago

I actually used his code as a basis for this exercise. I changed it and it didn't really make a difference. I ended up moving my ng-controller declaration into the body tag and that seems to have fixed the fact that ng-click wasn't running. I'm not sure why that fixed that though, unless there's something I'm missing about how AngularJS does it's scoping. Either way I'm still getting an undefined ID though.

Jared Reeves Over a year ago

Does any of the AngularJS work? Is the binding to {{mushroom.variety}} displaying the correct mushroom variety?

Brandon Kindred Over a year ago

Everything else works fine and populates as you expected. I got it figured out though, needed .id instead of ._id

Brandon Kindred · Accepted Answer · 2013-10-24 20:42:32Z

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];
    }
}

ritchielee · Accepted Answer · 2013-10-24 18:41:24Z

0

Have a look into linking to your data with ng-href, so with routing, something like:

$scope.mushroom_detail = DataService.mushrooms[$routeParams.id];

and as your html link:

<a ng-href="/#/mushroom/{{mushroom.id}}">{{mushroom.name}}</a>

outputting:

{{mushroom_detail.interesting_facts}}

answered Oct 24, 2013 at 18:41

ritchielee

2681 silver badge9 bronze badges

2 Comments

Brandon Kindred Over a year ago

From my understanding that would result in a fetch from the server, which isn't what I'm trying to do at the moment. I'm currently just trying to use a list that is already loaded into the scope.

ritchielee Over a year ago

DataService in this instance, is just some JSON stored in a service, nicely explained here: egghead.io/lessons/angularjs-ngrepeat-and-filtering-data

Collectives™ on Stack Overflow

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

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related