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: stackoverflow.com/questions/14994391/…. jQuery is not required/recommend when using AngularJS. — lin
– lin, Commented Feb 4, 2017 at 12:46

Stark Buttowski · Accepted Answer · 2017-02-04 12:51:18Z

8

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>

answered Feb 4, 2017 at 12:51

Stark Buttowski

1,8492 gold badges11 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

DrevanTonder Over a year ago

If I do that on jsfiddle it does not want to work though it works on this page. jsfiddle.net/DrevanTonder/sguy6agL

Poul Uvarov · Accepted Answer · 2017-02-04 12:55:06Z

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 4, 2017 at 12:55

Poul Uvarov

2271 silver badge4 bronze badges

Comments

IftekharDani · Accepted Answer · 2017-02-04 12:56:16Z

0

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

answered Feb 4, 2017 at 12:56

IftekharDani

3,7191 gold badge18 silver badges21 bronze badges

Comments

Vikash Kumar · Accepted Answer · 2017-02-04 13:11:23Z

0

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>

answered Feb 4, 2017 at 13:11

Vikash Kumar

2223 silver badges5 bronze badges

Collectives™ on Stack Overflow

Angular ng-click not firing

4 Answers 4

1 Comment

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Linked

Related