AngularJS-ng-click沒有用JQuery Mobile發射

我正在嘗試將迄今爲止關於AngularJS學到的知識應用到簡單的移動應用中，使用JQuery Mobile進行呈現。我已經看過Angular Mobile，但沒有發現很多有用的文檔或成熟的圖書館，因爲Angular還很年輕。無論如何，我的問題是，我試圖加載一個對象，當一個listItem被點擊時，但它甚至不像ng-click指令實際上在做任何事情。我甚至試圖只是登錄到控制檯，以顯示它實際上是觸發，但沒有骰子。AngularJS-ng-click沒有用JQuery Mobile發射

這是我到目前爲止。

模板：

<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，希望能夠解決這個問題。但顯然沒有。

來源

2013-10-24 Brandon Kindred

好吧我想通了我瘦ķ。首先，我將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]; 
    } 
}

來源

2013-10-24 20:42:32

你可以讓兩者一起工作，但也有一些問題。看看這個網站有一個很好的解釋。

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

而且我認爲你需要從點擊事件刪除{{}}。嘗試這個;

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

來源

2013-10-24 18:00:23

我居然用他的代碼，作爲這項工作的基礎。我改變了它，並沒有真正有所作爲。我最終將我的ng控制器聲明移動到body標籤中，似乎已經解決了ng-click沒有運行的事實。我不確定爲什麼這樣修正了這個問題，除非我錯過了AngularJS是如何確定範圍的。無論哪種方式，我仍然得到一個未定義的ID。 –

有沒有AngularJS的工作？綁定到{{蘑菇。品種}}顯示正確的蘑菇品種？ –

其他一切正常，並按照您的預期填充。我弄明白了，但需要.id而不是._id –

看一看入聯與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-24 18:41:24 ritchielee

從我的理解，這將導致從服務器獲取，這不是我目前正在嘗試做的。我目前只是試圖使用已經加載到範圍中的列表。 –

DataService在這個實例中，只是存儲在服務中的一些JSON，很好的解釋在這裏：http://egghead.io/lessons/angularjs-ngrepeat-and-filtering-data – ritchielee

AngularJS-ng-click沒有用JQuery Mobile發射

回答

相關問題