How to apply jquery after AngularJS partial template is loaded

Question

I have a simple website that implements jQuery in order to create a Slider with some images in the Index.html top banner.

Now, I want to use AngularJS so I'm breaking the HTML code into separate partials.

Header
Footer
Top Banner

If I run the Index.html in the original version (without applying AngularJS patterns) then I can see the slider working perfect.

When applying AngularJS patterns, I moved the top banner HTML to a partial html and then applied ng-view to the div where the top banner is originally located.

var app = angular.module('website', ['ngRoute']);
app.config(function($routeProvider) {
    $routeProvider.
    when('/about',{templateUrl:'app/partials/about.html'}).
    when('/contact',{templateUrl:'app/partials/contact.html'}).
    otherwise({redirectTo:'/home',templateUrl:'app/partials/home.html'})
});

When I refresh the page the slider is not working, is rendered as simple html without any jQuery effect, is really a mess.

This partials has some jQuery plugins that usually activates by document.ready. But this event not fire when angular load partial in ng-view. How can i call this event to initialize jQuery plugins?

Any clue how to fix this?

Appreciate any help.

The answer to almost anything jQuery/Angularjs related is to create a directive. The directive link function will be run when the partial is loaded, so any jQuery work you do inside will be relevant. — Zack Argyle, Mar 08 '14 at 22:09
I found this: $scope.$on('$viewContentLoaded', function () { // javascript code here }); whats the benefit of using a directive? — VAAA, Mar 08 '14 at 22:12
Directives are meant for adding behavior (binding to events etc.) or manipulating DOM elements. In general the rule is if you need to do some sort of DOM manipulation (add/remove/watch elements) then you need a directive. Wrapping up existing code in a directive isn't too complicated after the first shot. — shaunhusain, Mar 08 '14 at 22:36
Amazing... now everything is getting more clear to me. Thanks a lot — VAAA, Mar 08 '14 at 22:39
the alternative to @shaunhusain would be to init your plugins in the `.run()` setup of your module. — Brian Vanderbusch, Mar 08 '14 at 22:49
So........ Where's the answer guys? Post an answer with example? — trusktr, Mar 30 '14 at 22:17

score 20 · Answer 1 · answered Aug 05 '14 at 00:21

20

When you specify your routes, you can also specify a controller, so your routes would look like this:

var app = angular.module('website', ['ngRoute']);
app.config(function($routeProvider) {
    $routeProvider.
        when('/about',{templateUrl:'app/partials/about.html', controller: 'aboutCtrl'}).
        when('/contact',{templateUrl:'app/partials/contact.html', controller: 'contactCtrl'}).
        otherwise({redirectTo:'/home',templateUrl:'app/partials/home.html', controller: 'homeCtrl'})
    });

Now, you can define inside each controller what you want to do, jquery-wise, as part of a function, like this:

angular.module('website').controller('aboutCtrl', ['$scope', function ($scope) {

   $scope.load = function() {
       // do your $() stuff here
   };

   //don't forget to call the load function
   $scope.load();
}]);

Make sense?

answered Aug 05 '14 at 00:21

Aaron

435
3
5

For me that does not make too much sense - why would a Route directly include a Partial? I understand the question was related to partials, not to views with controllers. – ESP32 Mar 17 '15 at 08:21
1

This works and this is just brilliant. Quick note, you might have to use `jQuery` instead of `$` – MadushM Feb 26 '16 at 17:23
3

This doesn't work for me. $() can't find elements. they are not loaded yet – Stepan Yakovenko Apr 15 '16 at 17:04
@StepanYakovenko what was your solution in the end? – JayIsTooCommon Apr 06 '17 at 09:20
I did a dirty hack with calling $ with setTimeout. But later I've removed jquery at all. – Stepan Yakovenko Apr 06 '17 at 13:04

score 11 · Answer 2 · answered Aug 26 '14 at 19:35

The other provided answers will work, but they are bound to controllers, and therefore not as scalable and reusable.

To do it the real "Angular" way as mentioned in the comments, you should be using a directive. The benefit to this is that you're able to create several instances with the same code, and can pass in attributes to the directive logic to "customize" the directive. Here's a sample of a way I've used it using bxSlider plugin:

JS:

app.directive('slider',  ['$rootScope', function($rootScope) {
return {
    restrict: 'EA',
    templateUrl: '/path/to/template',
    link: function(scope, iElement, attrs) {
        //attrs references any attributes on the directive element in html

        //iElement is the actual DOM element of the directive,
        //so you can bind to it with jQuery
        $(iElement).bxSlider({
            mode: 'fade',
            captions: true
        });

        //OR you could use that to find the element inside that needs the plugin
        $(iElement).find('.bx-wrapper').bxSlider({
            mode: 'fade',
            captions: true
        });

       }
    };
}]);

HTML:

<div slider some-attibute="some-attribute"></div>

And inside your directive template you could have the slider wrapper and slides, which you could build dynamically using ng-repeat bound to scope data.

I'd recommend reading this excellent article by Dan Wahlin about creating custom directives and how to fully harness they're power.

This is the best answer and the correct way IS to use directives correctly. — Pogrindis, Aug 27 '14 at 18:39

Maranaho · Answer 3 · 2017-03-18T22:41:46.497

I had the same problem, I was loading some nav links in a ng-include and I have a script file called on my index.html with jquery instructions to make links active and It i not see the included content.

I tried all of the above solutions and for some reasons, none of them worked for me. When the content is not included (straight in the index.html) jquery kicks in fine but once included it stopped recognizing my elements.

So I simply wrapped my instructions in a setTimeout() function and it worked! Maybe it'll work for you too?

setTimeout(function() {
    $("nav ul li").click(function() {
        $("nav ul li").removeClass('active');
        $(this).addClass('active');
    });
});

Somehow the setTimeout() manages to load the script AFTER angular is done loading included content.

Happy coding everyone !

score 0 · Answer 4 · answered Mar 18 '15 at 11:37

A Directive is certainly a good option, but you can also add a controller to any partial, which will perform all tasks (also with jQuery if you want) after the partial is loaded:

Example: partials/menu.html

<div ng-controller="partialMenuCtrl">
   ...
</div>

score 0 · Answer 5 · edited Jun 12 '16 at 11:17

I had the same issue, I was running Jquery slick slider in simple html page it was working fine. How it works basically by including the slick.min.js file underneath the jquery.min.js file and then in script tags you need to initialize the plugin with options like e.g.

$('.items').slick({
   infinite: true,
   slidesToShow: 3,
   slidesToScroll: 3
});

now coming back to the issue, when I added Angular JS to my page and made partials of the page and then went back to the browser to check weather the page was working fine or not, the page was working fine except the slider. Then I tried to move those slick.min.js and plugin initialization to the partials, and it worked :)

How it worked I don't know the reason, since I am new to Angular but it worked and I am still wondering the reason.

score 0 · Answer 6 · edited Nov 11 '16 at 21:21

0

I know it is an old thread but just for the sake of completion, you can use the following JQuery code. It is called event Delegation.

$("#anyDivOrDocument").on('click', '#targetDiv', function(event) {
   event.preventDefault();
   alert( 'working' ); 
});

edited Nov 11 '16 at 21:21

Petter Friberg

21,252
9
60
109

answered Nov 11 '16 at 21:16

Taha

434
5
12

score 0 · Answer 7 · answered May 14 '17 at 20:46

I bought a html5 template and tried to integrate with my angularJS web app. I encountered the same issue. I solved it using:

Put the code below at where you put your <script src="vendor/61345/js/script.js"></script> code.

<script>
   document.write('<script src="vendor/61345/js/script.js"><\/script>');
</script>

How to apply jquery after AngularJS partial template is loaded

7 Answers7

Linked

Related