Call jQuery function on AngularJS

Question

How can I call a jQuery function or code with AngularJS?

For example, I have this HTML:

<iframe ng-src="{{v}}"></iframe>

And my controller:

angular.module("myApp", [])
  .controller("AppCtrl", function($scope, myService) {
    $scope.myScope = function() {

      $('iframe').pluginCall();

      myService.myFunc(function( data ){
        $scope.myVar = 'Hey';
        [...]
    });
   };
  });

So, I want to run $('iframe').css('opacity','.5'); for the stuff that will be returned for me.

How can I do this?

Check it!

don't put dom code in controllers...use directives. Element probably won't exist when you run that inside controller if using any routing templates and controllers shouldn't know anything about the dom — charlietfl, Sep 21 '15 at 13:24
@charlietfl hmm, this is exactly what happens. I'll check it, thanks — Adam, Sep 21 '15 at 13:26
if all you need is a youtube player, maybe you should search for angular modules doing exactly that. For example, a quick google search lead me to that: https://github.com/brandly/angular-youtube-embed . — BiAiB, Sep 21 '15 at 13:42
@BiAiB nice, but it's not what I'm looking for. Thanks for the tip anyway — Adam, Sep 21 '15 at 13:55

score 1 · Answer 1 · answered Sep 21 '15 at 13:13

1

I don't think you should do that, use the angular way instead:

<iframe ng-src="{{v}}" ng-style="{ opacity: '.5' }"></iframe>

If you really want to get the object inside the controller, you can use angular's element queries:

angular.element(document.querySelector('iframe')).css('opacity','.5';

answered Sep 21 '15 at 13:13

devqon

13,818
2
30
45

this jquery call was just an example, but I'll do something else, but the jquery I need to do is similar, but not css stuff. – Adam Sep 21 '15 at 13:17
Then please include what it is for, because then we might be able to give a better solution then using jQuery, this seems like an X-Y question – devqon Sep 21 '15 at 13:34

charlietfl · Answer 2 · 2015-09-21T13:38:57.617

Use a directive to initialize jQuery plugins if you must use them. This assures you that element exists when plugin is initialized.

<iframe my-iframe>

JS

app.directive('myIframe', function(){
      return{
        link:function(scope, elem, attrs){
          // elem is a jQuery object
          elem.pluginCall();
        }
    }    
});

Note that for angular to use jQuery internally for angular.element, you must load jQuery.js in page before angular.js

score 0 · Answer 3 · answered Sep 21 '15 at 13:16

0

angular.module("myApp", [])
.controller("AppCtrl", function($scope, myService) {
   $scope.myScope = function() {
      $(function () {
        // You can Write jquery here
        $('iframe').css('opacity','.5');
      });
      myService.myFunc(function( data ){
        $scope.myVar = 'Hey';
        [...]
     });
   };
});

answered Sep 21 '15 at 13:16

nim007

2,958
3
16
28

`document.ready` is worthless in angular with a few rare exceptions. It definitely doesn't belong in controllers though. Controller will run before element even exists – charlietfl Sep 21 '15 at 13:42

score 0 · Answer 4 · answered Sep 21 '15 at 13:21

0

You can use stuff like this :

$scope.yourAngularFunction=function(){
      myService.myFunc(function( data ){
      $scope.myVar = 'Hey';
      $('iframe').css('opacity','.5');
      $('#someOtherDiv').slideUp();
      //add other jquery stuff
}

answered Sep 21 '15 at 13:21

Pritam Banerjee

17,953
10
93
108

score 0 · Answer 5 · edited May 23 '17 at 12:22

Never use jQuery with angular unless & until required, because whatever is available in jquery is achievable in angularjs.

Dont Include ~18kb library into your page unnecessarily, for me its more like redundant code & also performance hit.

Think in Angular Way First

when coding a solution, first "think in AngularJS"; if you can't think of a solution, ask the community; if after all of that there is no easy solution, then feel free to reach for the jQuery. But don't let jQuery become a crutch or you'll never master AngularJS.

Pure Angular solution

HTML CODE:

<div ng-app="testApp" ng-controller="testCtrllr">
<div ng-style="{'background-color': backgroundImageInfo}">
    <input type="file" onchange="angular.element(this).scope().fileThatChangeBackground(this)" />
</div>
</div>

AngularJS Code:

angular.module('testApp',[])
.controller('testCtrllr', function($scope){
  $scope.backgroundImageInfo='red';    
  $scope.fileThatChangeBackground = function(scope) {                    
      $scope.$apply(function(){$scope.backgroundImageInfo='blue';});
  };
});

Live Demo @ JSFiddle

Call jQuery function on AngularJS

5 Answers5

Pure Angular solution