what is the best way to run jquery code in angularjs?

Question

I want to run some jquery code when DOM Ready. I used

angular.element(document).ready(function() {
$(".hover-brown").mouseover(function(e) {
        if ($(e.target).closest('.hover-yellow').length == 0) {
          $(this).not(".hover-yellow").css("background", "#e8e8e8");
        }
      }).mouseout(function() {
        $(this).not(".hover-yellow").css("background", "white");
      });

    $(".hover-yellow").hover(function() {
      $(this).css("background", "#e8e8e8");
    }, function() {
      $(this).css("background", "white");
    });
});

and tried window.load as well but it runs before Dom is ready i.e it does not find the elements when this function run.

Note: the elements are the <li>elements with class hover-brown rendered in view using ng-repeat directive.

alberto-bottarini · Accepted Answer · 2015-07-27 09:39:43Z

You did some conceptual errors. When you're using angular js you should avoid "jquery pattern" to assign event to the DOM. You shouldi instead use directive directly on DOM element.

For example, if you need browser triggers some custom code on mouseover you should create a function in your controller and assign to an element via ngMouseover directive (https://docs.angularjs.org/api/ng/directive/ngMouseover).

The same approach would be used for alter style of your nodes. You should use some variables that represents states (for example active) and bind css definition to this variables.

You can take a look here: http://codepen.io/anon/pen/gpBEgR

angular.module('demo',  []).controller('MyController', function($scope) {
  $scope.over = function() {
    $scope.style['backgroundColor'] = 'yellow';
  }
  $scope.out = function() {
    $scope.style['backgroundColor'] = 'green';
  }
  $scope.style = { 
    backgroundColor: 'green'
  };
});

z.a. · Accepted Answer · 2015-07-27 09:52:45Z

0

There is no problem with using jquery in angularjs, but you should use it within the context, like if it's related to a page use it in the controller. If it's related to a directive use it in directive's link or controller functions. That way, you will be sure that the document is loaded.

answered Jul 27, 2015 at 9:52

z.a.

2,7973 gold badges15 silver badges17 bronze badges

Comments

Joy · Accepted Answer · 2015-07-27 10:04:51Z

0

angular.element is not set until bindJQuery() in Angular is executed (Angular 1.4.1, Line 28288):

jqLite(document).ready(function() {
    angularInit(document, bootstrap);
});

So angular.element is not availabe before document is ready.

You should prevent the jQuery way to manipulate DOM structures. If you do want to do it, move the operation to the directive link functions. That means, move your code $(".hover-brown").mouseover(function(e) {... to some directive link function.

answered Jul 27, 2015 at 10:04

Joy

9,60011 gold badges49 silver badges99 bronze badges

Collectives™ on Stack Overflow

what is the best way to run jquery code in angularjs?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related