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

2 つを連携させることはできますが、いくつかの問題があります。こちらのサイトが分かりやすく解説されていますのでご覧ください。

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

また、クリック イベントから {{ }} を削除する必要があると思います。これを試して;

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