Angular - how to call javascript function inside ng-view

Question

I am building a single page app with Angular JS. Here are my files

index.html

<script src="js/dishesapp.js"></script>
<div ng-view></div>

dishestemplate.html

<script src="js/bxslider.js"></script>  (which is for my image slider)

bxslider.js has some function and

$(document).ready(function ()
{
    $('.bxslider').bxSlider();
});

dishesapp.js

var dishesApp = angular.module('dishesApp', ['ngRoute']);
        dishesApp.config(function ($routeProvider) {
            $routeProvider
                    .when('/', {templateUrl: 'partials/default.html'})
                    .when('/Noodles', {templateUrl: 'partials/dishtemplate.html', controller: 'NoodlesCtrl'})
                    .when('/Rolls', {templateUrl: 'partials/dishtemplate.html', controller: 'RollsCtrl'})
                    .when('/Pancakes', {templateUrl: 'partials/dishtemplate.html', controller: 'PancakesCtrl'})
                    .when('/Rice', {templateUrl: 'partials/dishtemplate.html', controller: 'RiceCtrl'})
                    .when('/FamilyStyle', {templateUrl: 'partials/dishtemplate.html', controller: 'FamilyStyleCtrl'})
                    .when('/Others', {templateUrl: 'partials/dishtemplate.html', controller: 'OthersCtrl'})
                    .otherwise({redirectTo: '/'});
    });

The index.html successfully load all the partial views. But template.html cannot load the javascript file so the slider doesnt work. Is there a way to solve this problem?

ThiagoPXP · Accepted Answer · 2015-05-28 06:23:11Z

2

$(document).ready(function (){}) shouldn't be used in conjunction with Angular.

What you need is a directive. Create a directive for you slider and use on your dishestemplate.html file. In the directive you call your jQuery plugin.

In dishestemplate.html

<div my-slider></div>

Your directive

angular.module('yourAngularApp', [])
    .directive('mySlider', function() {
      return {
          restrict: 'A',
          template: '<div class="slider">The HTML for your slider</div>',
          link: function (scope, element, attrs) {
              element.bxSlider(); //call your plugin here!
          }
      };
});

edited May 28, 2015 at 6:23

answered May 28, 2015 at 1:44

ThiagoPXP

5,4823 gold badges34 silver badges45 bronze badges

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

1 Comment

CuriousHenry Over a year ago

I made some minor changes (templateUrl instead because the html is long) and it works perfectly. Thank you for saving my life :))

Sridhar Gudimela · Accepted Answer · 2015-05-27 23:41:06Z

0

Move <script src="js/bxslider.js"></script> to index.html and add the following script at the end/bottom of your dishtemplate.html

<script>
    $('.bxslider').bxSlider();
</script>

answered May 27, 2015 at 23:41

Sridhar Gudimela

5848 silver badges16 bronze badges

2 Comments

Sridhar Gudimela Over a year ago

I don't see a hardcode or ng-repeat requirement in your above description and even if ng-repeat exists, this approach has nothing do anything with it and it works properly. Can you give more details about your actual requirement that may help me to give more appropriate solution.

CuriousHenry Over a year ago

When I use ng-repeat but dont call the bxslider, all the data in <li> of the slider are retrieved properly. When I call the slider the way you suggest, it only displays the second entry. I am trying ti figure out what happening. I very appreaciate your feedback. Fiy, if I hard code all data in the <li>, all the data entries are displayed properly when I call the slider.

Collectives™ on Stack Overflow

Angular - how to call javascript function inside ng-view

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related