Why dom events doesn't work inside controller in angularjs

Question

I have a controller like this which is attached to body of html.

angular.module("app", [])

.controller("MyCtrl", function($scope) {

   // Here I perform some jquery code listening for click event

   $("a").click(function() {
      $(this).toggleClass("active");
   });

});

Now, I want to know why this doesn't work inside controller. I know, if I put it into directive then it does work.

Not a direct answer, but in my opinion, DOM operations should never be inside controller. Is there some specific purpose for this approach? Like you said, it works in directive. — Samuli Hakoniemi, Nov 17 '14 at 09:31
I think you should read again what an AngularJs controller is. That function you defined is used as a constructor — Pablo Lozano, Nov 17 '14 at 09:32
Please place whole code here..how are you trying to access this controller. If possible also make a plunker of it. — Harsh, Nov 17 '14 at 09:32
it is javascript -- it does not matter if it is inside controller, directive or global scope. So show us your console log. — artur grzesiak, Nov 17 '14 at 09:33
Probably corresponding DOM is not yet rendered when you are binding click event. — dfsq, Nov 17 '14 at 09:34
@dfsq, you are right, I am using routing to render some parts of html which was not loaded before event binding. So that's the problem. Thanks for your comment. — Ashish Rawat, Nov 17 '14 at 09:36

score 1 · Accepted Answer · edited May 23 '17 at 12:05

Don't mix up JQuery with AngularJS, Since its not a Good Practice,

If you want some toggle feature use in-built ngClick directive feature provided by AngularJs instead of using JQuery $("a").click

Sample Demo 1

Sample Demo 2

Sample Demo 3

Sample Demo 4

function MainController($scope) {
  $scope.toggle = true;
}

.box {
  color: white;
  text-align: center;
  height: 100px;
  font-size: 86px;
}
.on {
  background-color: green;
}
.off {
  background-color: red;
}
.box-show-setup,
.box-hide-setup {
  -webkit-transition: all linear 0.3s;
  -moz-transition: all linear 0.3s;
  -ms-transition: all linear 0.3s;
  -o-transition: all linear 0.3s;
  transition: all linear 0.3s;
}
.box-show-setup {
  opacity: 0;
  height: 0;
}
.box-show-setup.box-show-start {
  opacity: 1;
  height: 100px;
}
.box-hide-setup {
  opacity: 1;
  height: 0;
}
.box-hide-setup.box-hide-start {
  opacity: 0;
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="MainController">
  <button ng-click="toggle = !toggle">Toggle!</button>

  <div class="box on" ng-show="toggle" ng-animate="'box'">On</div>
  <div class="box off" ng-hide="toggle" ng-animate="'box'">Off</div>
</div>

Why dom events doesn't work inside controller in angularjs

1 Answers1