ng-click 在 Ionic 中没有触发答案

【问题标题】：ng-click not firing in Ionicng-click 在 Ionic 中没有触发
【发布时间】：2016-12-30 07:27:54
【问题描述】：

这是我的 HTML 代码：

<ion-view view-title="Food Log - {{date | date:'dd/MM/yyyy'}}" ng-controller="FoodLogCtrl">
  <div id="foodlog_calorie_progress">
    <div>6300</div>
    <div>3100</div>
  </div>
  <div id="foodlog_calorie_text">
    <div>
      consumed
    </div>
    <div>
      remaining
    </div>
  </div>
  <div id="foodlog_entry_buttons">
    <button type="button" ng-click="takePicture()">
      <span class="ion-camera"></span>
      Capture
    </button>
    <button>
      <span class="ion-images"></span>
      Gallery
    </button>
  </div>
  <img ng-repeat="image in images" ng-src="{{urlForImage(image)}}" height="200px" />
  <div id="foodlog_overview" class="list">
    <a class="item item-icon-left" href="#">
      <i class="icon ion-pizza"></i>
      Last meal time
      <span class="item-note">
        1:16 pm
      </span>
    </a>
    <a class="item item-icon-left" href="#">
      <i class="icon ion-steam"></i>
      Last meal added
      <span class="item-note">
        Chicken Roll
      </span>
    </a>
    <a class="item item-icon-left" href="#">
      <i class="icon ion-medkit"></i>
      Last calorie intake
      <span class="item-note">
        50g
      </span>
    </a>
  </div>
</ion-view>

这是控制器：

.controller("FoodLogCtrl", function ($scope, $cordovaCamera, $cordovaFile) {
  $scope.menuTabShowHide(false);

  $scope.images = [];

  $scope.takePicture = function () {
    alert("asdf");
  }

  $scope.urlForImage = function(imageName) {
    ...
  }
})

由于某种原因，takePicture 函数无法运行。不过，在它运行良好之后立即写$scope.takePicture()。

【问题讨论】：

我不确定，你在找什么.. ;-)
你的$scope函数应该以分号';'结束
@HaraldWiesinger 我想发出警报，但不知何故 ng-click 没有绑定它。
你能清除缓存并检查一下吗？
控制台有什么错误吗？

标签： javascript html ios angularjs ionic-framework

【解决方案1】：

我让你的代码在这里工作。看看你有没有发现不一样的东西。

http://codepen.io/anon/pen/yJWxWY

<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 

    <title>Ionic Modal</title>

    <link href="http://code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="http://code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
  </head>


     <ion-view view-title="Food Log - {{date | date:'dd/MM/yyyy'}}" ng-controller="FoodLogCtrl">
  <div id="foodlog_calorie_progress">
    <div>6300</div>
    <div>3100</div>
  </div>
  <div id="foodlog_calorie_text">
    <div>
      consumed
    </div>
    <div>
      remaining
    </div>
  </div>
  <div id="foodlog_entry_buttons">
    <button type="button" ng-click="takePicture()">
      <span class="ion-camera"></span>
      Capture
    </button>
    <button>
      <span class="ion-images"></span>
      Gallery
    </button>
  </div>
  <img ng-repeat="image in images" ng-src="{{urlForImage(image)}}" height="200px" />
  <div id="foodlog_overview" class="list">
    <a class="item item-icon-left" href="#">
      <i class="icon ion-pizza"></i>
      Last meal time
      <span class="item-note">
        1:16 pm
      </span>
    </a>
    <a class="item item-icon-left" href="#">
      <i class="icon ion-steam"></i>
      Last meal added
      <span class="item-note">
        Chicken Roll
      </span>
    </a>
    <a class="item item-icon-left" href="#">
      <i class="icon ion-medkit"></i>
      Last calorie intake
      <span class="item-note">
        50g
      </span>
    </a>
  </div>
</ion-view>


</html>

和JS

angular.module('ionicApp', ['ionic'])
.controller('FoodLogCtrl', function($scope) {

 $scope.takePicture = function () {
    alert("take pic");
  }

});

如果您仍然无法触发点击事件，则可能是 CSS 问题，并且按钮元素上可能覆盖了其他一些元素：只是一个想法

【讨论】：