Question

我正在尝试将迄今为止我学到的关于AngularJS的一点点用于使用JQuery Mobile渲染的简单移动应用程序。我已经研究过Angular Mobile，但是由于Angular还很年轻，所以没有找到太多有用的文档或成熟的库。无论如何，我的问题是我在点击listItem时尝试加载一个对象，但它看起来甚至看起来像ng-click指令实际上正在做任何事情。我甚至尝试过登录到控制台以显示它实际上是在触发，但没有骰子。

这是我到目前为止所拥有的。

模板：

<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>

控制器：

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])

我不确定它是否与JQuery Mobile发生冲突，或者我只是在展示我使用AngularJS的多少菜鸟。任何人都可以清楚地知道为什么当我点击链接时，selectMushroom（）函数似乎没有评估。我现在看起来已经高低两天了，这有点令人沮丧。此外，我目前正在使用AngularJS 1.0.2，jQuery 1.9.1和jQuery Mobile 1.3.1。我还尝试添加最新版本的angular-mobile-nav和ng-mobile.js，希望能解决这个问题。但显然它没有。

Answer 1

你可以让两者一起工作，但也存在一些问题。查看此网站以获得更好的解释。

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

此外，我认为您需要从点击事件中删除{{}}。试试这个;

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

Answer 2

好的我想出来了。首先，我将ng-controller指令移动到body标签，并从页面的div标签中删除了声明。然后我在模板和控制器中用.id替换了._id，并且它有效。

模板

<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>

控制器

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

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

Answer 3

请查看使用ng-href链接到您的数据，以及路由，例如：

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

和你的html链接：

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

输出：

{{mushroom_detail.interesting_facts}}

AngularJS - ng-click不会使用JQuery Mobile触发

3 个答案: