ng-click 在 Ionic 应用程序的项目内部不起作用

Question

在弹出的离子模式中的项目内部时，我无法触发 ng-click 事件。当我点击一个项目时，我看到它变成灰色，所以它似乎正在注册点击，但我有一个 console.log 语句作为我的 joinGroup 函数的第一行并且没有任何输出到控制台。

我也尝试过使用 ion-list 和 ion-item 元素，但它们也不起作用。

<ion-modal-view>
  <ion-header-bar class="bar bar-header bar-balanced">
    <h1 class="title">Join Court</h1>
    <button class="button button-clear button-primary" ng-click="modal.hide()">Done</button>
  </ion-header-bar>
  <ion-content class="padding">
    <div class="list">
      <div class="item item-icon-right" ng-repeat="group in groups"  ng-click="joinGroup(group)">
        <h2>{{group.name}}</h2>
        <p>{{group.address}}</p>
      </div>
    </div>
  </ion-content>
</ion-modal-view>

var joinGroup = function (group) {

  console.log("Call joinGroup");

Answer 1

试试这个

<ion-modal-view>
  <ion-header-bar class="bar bar-header bar-balanced">
    <h1 class="title">Join Court</h1>
    <button class="button button-clear button-primary" ng-click="modal.hide()">Done</button>
  </ion-header-bar>
  <ion-content class="padding">
    <ion-list ng-repeat="group in groups" >
        <ion-item  ng-click="joinGroup(group)">
           <h2>{{group.name}}</h2>
           <p>{{group.address}}</p>
        </ion-item>
    </ion-list>
  </ion-content>
</ion-modal-view>

在你的控制器中尝试使用 $scope 编写这样的函数。

$scope.groups = [];
$scope.joinGroup = function(){

   //do your stuff here
}

Answer 2

我假设你没有正确连接你的视图和你的控制器

你有

.controller('myCtl', myCtl);

function myCtl($scope) {

   $scope.groups = [];
   $scope.joinGroup = function(args) {};

}

和您的观点

<div ng-controller="myCtl">
   <ion-content class="padding">
       <ion-list ng-repeat="group in groups" >
           <ion-item ng-click="joinGroup(group)">
               <h2>{{group.name}}</h2>
               <p>{{group.address}}</p>
           </ion-item>
        </ion-list>
   </ion-content>
</div>

或者您可以使用我更喜欢的这种方法

.controller('myCtl', myCtl);

function myCtl() {

   var vm = this;

   vm.groups = [];
   vm.joinGroup = function(args) {};

}

查看

<div ng-controller="myCtl as vm">
   <ion-content class="padding">
       <ion-list ng-repeat="group in vm.groups" >
           <ion-item ng-click="vm.joinGroup(group)">
               <h2>{{group.name}}</h2>
               <p>{{group.address}}</p>
           </ion-item>
        </ion-list>
   </ion-content>
</div>

Answer 3

你需要定义angular模块和angular控制器并把

app.controller('name',function($scope){
   $scope.joinGroup = function(group){
 console.log("Call joinGroup");
}
})

ng-click 在 Ionic 应用程序的项目内部不起作用

ng-click not working inside item in Ionic app

javascript

angularjs

ionic-framework

angularjs-ng-click