离子旋转器上不能执行ng-click事件

Question

我正在使用Ionic框架制作移动应用。 我在头条上创建了一个离子微调器，代码如下：

<ion-nav-buttons side="primary" ng-click="say();">
<ion-spinner icon="lines" class="spinner-balanced"></ion-spinner>
</ion-nav-buttons>

$scope.say = function(){
    console.log('abc');
    alert('hihi);
}

但我无法使用它进行ng-click或任何触摸/点击事件。我认为微调器是一个很酷的图标，能够点击它会很好。有没有办法可以点击微调器并在控制器中调用$ scope func = function（）{}？

Answer 1

问题是您无法将ng-click指令添加到微调器的svg元素中。

我提出的解决方案是将微调器包装在div元素中并将其z-index置于前面，使其显示在微调器前面（微调器仍然可见）。您必须更改控制器代码以匹配您的应用程序名称，控制器名称等。

实时预览：http://codepen.io/larryjoelane/pen/KVGddX

HTML：

<div ng-app="app" ng-controller="ionNavBar">
  <!--begin app container, the ng app would normally be placed in the opening html tag-->


  <ion-nav-bar>
    <ion-nav-buttons side="primary">

      <div ng-click="say();" id="spinner">
        <ion-spinner icon="lines" class="spinner-balanced"></ion-spinner>
      </div>


    </ion-nav-buttons>
  </ion-nav-bar>

  <br>
  <br>

</div>
<!--end app container-->

CSS：

.spinner svg {
  width: 28px;
  height: 28px;
  stroke: #999;
  fill: #999;
}

#spinner{
  z-index:1000;

}

角/ JavaScript的：

var app = angular.module("app",['ionic']);

app.controller("ionNavBar",["$scope",function($scope){


  $scope.say = function(){

    alert("say function was called.")

  };


}]);//end controller