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

回答

相关问题