Access jquery object from angular functions

Question

I have an app with angularjs and jquery. I have some jquery in the following angularjs script:

//allow co-existence of jquery and angular 
var $jq = jQuery.noConflict();
//initialize an angular scoped variable taht will be manipulated and used by jquery object
$scope.myOption1 = true;

//jquery ready function
$jq(function() {
   var myGadget = $jq('.gadget-container').gadget({ 
     option1:  $scope.myOption1
   });
});


//angular function to manipulate the jquery object (which represents an image slider)
$scope.myFunction = function() {
  //change myOption1 to false
  $scope.myOption1 = false;

  //re-initialize myGadget with new myOption1 value
  myGadget.reInit();    //reInit is a built-in function for myGadget to reinitialize the gadget when options change

}

Jquery can access $scope.myOpyion1 just fine. But angular throws the error "myGadget is not defined" when the angular function $scope.myFunction runs. I understand why - it's looking for angular variable, not jquery variable. So how can I access the jquery variable myGadget in angular functions?

Fueled By Coffee · Accepted Answer · 2015-01-09 17:22:05Z

2

myGadget isn't in scope. Declare myGadget outside of your ready closure:

//allow co-existence of jquery and angular 
var $jq = jQuery.noConflict();
//initialize an angular scoped variable taht will be manipulated and used by jquery object
$scope.myOption1 = true;

$scope.myGadget = null;

//jquery ready function
$jq(function() {
   $scope.myGadget = $jq('.gadget-container').gadget({ 
     option1:  $scope.myOption1
   });
});


//angular function to manipulate the jquery object (which represents an image slider)
$scope.myFunction = function() {
  //change myOption1 to false
  $scope.myOption1 = false;

  //re-initialize myGadget with new myOption1 value
  $scope.myGadget.reInit();    //reInit is a built-in function for myGadget to reinitialize the gadget when options change

}

edited Jan 9, 2015 at 17:22

answered Jan 9, 2015 at 15:50

Fueled By Coffee

2,5797 gold badges33 silver badges45 bronze badges

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

1 Comment

lilbiscuit Over a year ago

Well this was close enough, as 'myGadget isn't in scope' is the key issue. However, using var doesn't work, but using $scope does :) So if you can change var myGadget to $scope.myGadget I will award answer to you. Make sure to use $scope.myGadget everywhere.

sbedulin · Accepted Answer · 2015-01-09 16:08:23Z

0

You are creating myGadget in a private scope.

Although there is a lot to improve, try

var myGadget;

//jquery ready function
$(function() {
   myGadget = $('.gadget-container').gadget({ 
     option1:  $scope.myOption1
   });
});


//angular function to manipulate the jquery object (which represents an image slider)
$scope.myFunction = function() {
  //...

  myGadget.reInit();
}

BTW angular.element === jQuery in case jQuery is used along with Angular

and it's not required to use $jq and noConflict because angular doesn't overwrite $ symbol

edited Jan 9, 2015 at 16:08

answered Jan 9, 2015 at 15:50

sbedulin

4,4101 gold badge26 silver badges34 bronze badges

2 Comments

lilbiscuit Over a year ago

I can't use angular.element because it defaults to jQlite.

sbedulin Over a year ago

This is false, if you remove var $jq = jQuery.noConflict() angular.element would be equal to jQuery.

Collectives™ on Stack Overflow

Access jquery object from angular functions

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related