Angular ng-click not firing

Question

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

and a lot more

Html:

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

JS:

var testApp = angular.module('testApp', []);
testApp.controller('testController', function($scope) {
  $scope.obey = function test(id) {
    $("#" + id).fadeOut("slow", function() {
      this.remove()
    });
  };
});

For some reason the div does not fade out at all.

Just a hint, you should avoid DOM manipulations while using AngularJS please refer: http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background. jQuery is not required/recommend when using AngularJS. — lin, Feb 04 '17 at 12:46

score 7 · Accepted Answer · answered Feb 04 '17 at 12:51

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>

If I do that on jsfiddle it does not want to work though it works on this page. https://jsfiddle.net/DrevanTonder/sguy6agL/ — DrevanTonder, Feb 04 '17 at 13:05

score 0 · Answer 2 · answered Feb 04 '17 at 12:55

0

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>

answered Feb 04 '17 at 12:55

Poul Uvarov

219
1
4

score 0 · Answer 3 · answered Feb 04 '17 at 12:56

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

score 0 · Answer 4 · answered Feb 04 '17 at 13:11

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>

Angular ng-click not firing

4 Answers4

Linked