Question

这是我的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()运行正常之后立即写<p id="p1" style="line-height:100%"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>。

Answer 1

我让你的代码在这里工作。看看你是否发现了不同的东西。

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

withLatestFrom

和JS

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

如果仍然无法触发click事件，可能会出现CSS问题，并且其他一些元素可能已经叠加在按钮元素上：只是一个想法

ng-click不在Ionic中射击

1 个答案: