CODEWITHSUNDEEP
javascripthtmliosangularjsionic-framework
Zerium
Zerium

Reputation: 17333

ng-click not firing in Ionic

This is my HTML code:

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

This is the controller:

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

  $scope.images = [];

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

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

For some reason, the takePicture function just won't run. Writing $scope.takePicture() right after it runs fine, though.

Upvotes: 2

Views: 1374

Answers (1)

Dinesh Devkota
Dinesh Devkota

Reputation: 1417

I got your code working here. See if you find something different.

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>

and JS

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

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

});

If you still cannot trigger the click event, there could be CSS issue and some other element could have been overlaying on the button element :Just a thought

Upvotes: 1

Related Questions