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

您需要定义角度模块和角度控制器

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

ng-click在Ionic app中的项目内部无效

3 个答案: