How to Invoke Jquery plugins in angular js app
$(".my-slider").slider();
4 Answers
You should make it directive:
<div my-slider></div>
and the definition:
.directive('mySlider', function(){
return {
restrict: 'E',
link: function(scope, element){
element.slider();
}
};
});
sometimes it's needed to have $timeout hack:
.directive('mySlider', function($timeout){
return {
restrict: 'E',
link: function(scope, element){
$timeout(function(){
element.slider();
});
}
};
});
Comments
A more common way would be finding a angular wrapper for the plugin (normally widget), in this example https://github.com/angular-ui/ui-slider
The wrapper would convert a widget to an angular directive so you can develop using angular way only instead of mixing both. An advantage of directive over widget is you don't need to worry about class targeting and resolving .value and then scope.$apply it.
Of course if you insist to use vanilla widget you can just write javascript inside corresponding controller, or you can manually wrap the widget suggested in other answer.
Comments
You could create directives for each of the jQuery plugins you are using. If you do, you may want to read up on isolated scope also.
This would give you clean reusable elements throughout your code without having to write $(".my-slider").slider(); over and over again.
I can't take credit for this fiddle, but an example of what I mean can be found here.
Comments
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script>
angular.module("myApp",[]).controller("myController",function($scope){
$scope.name="Sagar Chopada";
$('button').click(function(){
$('.demo').toggle(400);
});
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
<button>Click me </button>
<div class="demo">My Name Is {{name}}!</div>
</body>
</html>Hope that Was Help You..
