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
– charlietfl, Commented Sep 21, 2015 at 13:24
@charlietfl hmm, this is exactly what happens. I'll check it, thanks — Adam
– Adam, Commented Sep 21, 2015 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: github.com/brandly/angular-youtube-embed . — BiAiB
– BiAiB, Commented Sep 21, 2015 at 13:42
@BiAiB nice, but it's not what I'm looking for. Thanks for the tip anyway — Adam
– Adam, Commented Sep 21, 2015 at 13:55

devqon · Accepted Answer · 2015-09-21 13:13:15Z

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, 2015 at 13:13

devqon

14k2 gold badges32 silver badges46 bronze badges

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

2 Comments

Adam Over a year ago

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.

devqon Over a year ago

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

charlietfl · Accepted Answer · 2015-09-21 13:38:57Z

1

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

edited Sep 21, 2015 at 13:38

answered Sep 21, 2015 at 13:29

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Comments

nim007 · Accepted Answer · 2015-09-21 13:16:17Z

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, 2015 at 13:16

nim007

3,0683 gold badges21 silver badges30 bronze badges

1 Comment

charlietfl Over a year ago

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

Pritam Banerjee · Accepted Answer · 2015-09-21 13:21:02Z

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, 2015 at 13:21

Pritam Banerjee

19.1k10 gold badges97 silver badges113 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:22:43Z

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

Collectives™ on Stack Overflow

Call jQuery function on AngularJS

5 Answers 5

2 Comments

Comments

1 Comment

Comments

Pure Angular solution

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

1 Comment

Comments

Pure Angular solution

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related