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

Answer 1

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>

Answer 2

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' ); 
});

Answer 3

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.

Answer 4

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?

Answer 5

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 !

Answer 6

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>