0

我正在尝试将迄今为止我所学到的关于 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() 函数似乎没有进行评估。我现在已经看了大约 2 天的高低，这变得有点令人沮丧。此外，我目前正在使用 AngularJS 1.0.2、jQuery 1.9.1 和 jQuery Mobile 1.3.1。我还尝试添加 angular-mobile-nav 和 ng-mobile.js 的最新版本，希望它能解决问题。但显然它没有。

4

3 回答 3

1

好吧，我想通了。首先，我将 ng-controller 指令移动到 body 标记，并从 page 的 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];
    }
}
于 2013-10-24T20:42:32.027 回答
1

您可以让两者一起工作，但存在一些问题。查看这个网站以获得很好的解释。

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

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

ng-click="selectMushroom(mushroom._id)"
于 2013-10-24T18:00:23.223 回答
0

看看使用 ng-href 链接到您的数据，因此使用路由，例如：

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

并作为您的 html 链接：

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

输出：

{{mushroom_detail.interesting_facts}}
于 2013-10-24T18:41:24.747 回答