How can you run a Javascript on a new AngularJS view

Question

I am using routes in AngularJS which displays a different view based on the parameter, i.e URL parameter provided. I have a view that displays a slick slider. Unfortunately, the slider is not being instantiated or ran when the new view is displayed. How can I have this javascript run when the new view is displayed? Do I need to create a new directive?

AngularJS:

angularApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
    when('/',
    {
        templateUrl:'/pages/default.html'
    }).
    when('/:params',
     {
        templateUrl: function(params){    
            params.param = params.params.replace(':', ''); 
            return '/pages/'+params.param; }

     });
}]);

Slick Slider JS:

$(window).load(function(){
  $('.slickSlider').slick({
    slidesToShow: 4,
    arrows: true,
    infinite: true,
    autoplay: true, 
    slidesToScroll: 1
  });

Why not just place an initialize method in the controller for that particular view that runs your slickSlider code? — ragerory
– ragerory, Commented Nov 24, 2015 at 21:32
Check this answer: AngularJS Partial HTML not able to use jquery lib — jherax
– jherax, Commented Feb 16, 2016 at 17:55

Community · Accepted Answer · 2017-05-23 11:45:00Z

1

Generally speaking- it is not recommended to combine jQuery & Angular when it comes to loading sequence... it is a bit messy. Better use one of them.

For your specific problem, I'd use the 'controller as', seen in this SO topic and on the controllers init, to call the functions you want.

edited May 23, 2017 at 11:45

CommunityBot

11 silver badge

answered Nov 24, 2015 at 21:36

Ziv Weissman

4,5664 gold badges31 silver badges64 bronze badges

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

Comments

Tennyson H · Accepted Answer · 2015-11-24 21:30:18Z

0

You can add a onload attribute to the ng-view element that you are using for the view.

e.g. <div ng-view onload='startSlider()'>

then refactor slick slider to just be

function startSlider(){
  $('.slickSlider').slick({
    slidesToShow: 4,
    arrows: true,
    infinite: true,
    autoplay: true, 
    slidesToScroll: 1
  };

answered Nov 24, 2015 at 21:30

Tennyson H

1,72615 silver badges29 bronze badges

1 Comment

Coded Container Over a year ago

I have tried to add an alert to the onload event and nothing happened.

Coded Container · Accepted Answer · 2015-11-25 14:37:51Z

0

All you need to do is create an initialization function within your controller. Below is an example of what this would look like. When the view is initialized it called the controller in which the $scope function is called and your plugin JS code can run.

=== AngularJS ===

angularApp.controller('blog', function($scope){
    $scope.init = function()
    {
        $('.slickSlider').slick({
            slidesToShow: 4,
            arrows: true,
            infinite: true,
            autoplay: true, 
            slidesToScroll: 1
          });
    }
    $scope.init();

});

=== HTML ===

<div ng-controller="blog"></div>

answered Nov 25, 2015 at 14:37

Coded Container

8632 gold badges12 silver badges35 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:31:08Z

I performed some refactoring to the code, in order to provide more semantic and clearness.

When the view is loaded, it emits the event: $viewContentLoaded meaning the DOM is loaded, then you can initialize jQuery plugins safely.

angularApp.config(['$routeProvider',
  function Router($routeProvider) {
      'use strict';

      $routeProvider
      .when('/:params', {
          templateUrl: function(params) {
              params.param = params.params.replace(':', '');
              return '/pages/' + params.param;
          },
          controller: 'ParamsCtrl',
          controllerAs: 'paramsCtrl'
      });
  }
]);

angularApp.controller('ParamsCtrl', ['$scope',
  function ParamsCtrl($scope) {
      'use strict';

      var paramsCtrl = this, //the controller
          $ = jQuery; //safe alias to jQuery

      //if your content is inside ng-include, 
      //use: $scope.$on('$includeContentLoaded')
      //emitted every time the ngInclude content is reloaded
      $scope.$on('$viewContentLoaded', function() {
          $('.slickSlider').slick({
              slidesToShow: 4,
              arrows: true,
              infinite: true,
              autoplay: true,
              slidesToScroll: 1
          });
      });
  }
]);

Check this useful answer: AngularJS Partial HTML not able to use jquery lib

Collectives™ on Stack Overflow

How can you run a Javascript on a new AngularJS view

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related