Skip to content Skip to sidebar Skip to footer
Home / Angularjs / Html / Javascript / Jquery

Angular Ng-click Not Firing

Post a Comment
I have tried many different things to try to get this to work. I have read: ng-click not firing in AngularJS while onclick does AngularJS : ng-click not working and a lot more Html

Solution 1:

You specified your app name in controller. check this.

var testApp = angular.module('testApp', []);
testApp.controller('testController', function($scope) {
  $scope.obey = function test(id) {
    $scope.hide= !$scope.hide;
  };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="testApp" ng-controller="testController">
  <div id="bla">
    <button ng-click="obey('bla')">Close</button>
    <h4 ng-hide="hide">Bla bla bla</h4>
  </div>
</div>

Solution 2:

Seems to me it's something wrong with name of your controller. Try this:

<div ng-app="testApp" ng-controller="testController">
  <div id="bla">
    <button ng-click="obey('bla')">Close</button>
    <h4>Bla bla bla</h4>
  </div>


Solution 3:

you can use a ng-show or ng-hide in this case

<div ng-controller="testApp">
  <div id="bla">
    <button ng-click="obey()">Close</button>
    <h4  ng-show="viewDiv">Bla bla bla</h4>
  </div>
</div>

var testApp = angular.module('testApp', []);
testApp.controller('testController', function($scope) {
 $scope.viewDiv = true;
  $scope.obey = function test(id) {
   $scope.viewDiv = !$scope.viewDiv;
  };
});

for angular animation - refer LINK


Solution 4:

specified proper "ng-app" and "ng-controller" name

HTML ie.

<body ng-app="testApp">
    <div ng-controller="testController">
      <div id="bla">
        <button ng-click="obey('bla')">Close</button>
        <h4>Bla bla bla</h4>
      </div>
    </div>
<body>

Post a Comment for "Angular Ng-click Not Firing"