Доступ к объекту jquery из угловых функций

Question

У меня есть приложение с угловыми и jquery. У меня есть JQuery в следующем angularjs сценария:

//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 может получить доступ к $ scope.myOpyion1 просто отлично. Но угловое значение вызывает ошибку «myGadget не определена» при запуске угловой функции $ scope.myFunction. Я понимаю, почему - он ищет угловую переменную, а не переменную jquery. Итак, как я могу получить доступ к переменной jQuery myGadget в угловых функциях?

Answer 1

myGadget нет в объеме. Объявить myGadget вне вашего ready закрытия:

//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 

} 

Answer 2

Вы создаете myGadget в личном режиме.

Хотя есть много, чтобы улучшить, попробуйте

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 в случае JQuery используется вместе с угловыми

и это не обязательно использовать $jq и noConflict, поскольку угловое не перезаписывает $ символ