Search code examples
javascriptjqueryhtmlangularjsnivo-slider

Implemented AngularJS views and now Nivo Slider doesn't work

Originally, I had the the Nivo Slider working great on this non-profit's homepage, but then as I introduced AngularJS views...the Nivo Slider and this JQuery Advanced News Ticker broke. I'm sure I'm missing something really obvious, but I'm not sure what it is. More specifically, the Nivo Slider is just showing the loading gif and not loading the images and JQuery Advanced News Ticker doesn't work at all. I'm not sure how to make this question clearer, but I assume that it has to be some conflict between the jQuery and the AngularJS? Or am I not implementing views correctly?

Here's a basic outline of what's going on in Plunker: Site Example

Here is nivo slider html code:

     <div class="slider-wrapper theme-default">
        <div class="ribbon"></div>

        <div id="slider" class="nivoSlider">
            <img src="img/slide2.jpg"/>
            <img src="img/slide3.jpg" title="#htmlcaption"/>
        </div>
        <div id="htmlcaption" class="nivo-html-caption">
            <strong>This</strong> is an example of a caption with <a href="#">a link</a>.
        </div>
    </div>

Any help would be greatly appreciated!

thanks, Justin

Solution

  • use directive in angularjs. I used following code while i was routing a view in a template.

    script.js

    var App= angular.module('App', ['ngRoute']);
App.config(function($routeProvider) {
$routeProvider

    // route for the home page
    .when('/', {
        templateUrl : 'page.html',
        controller  : 'appController'
    })        
});

// slideit directive is used in page.html
App.directive('slideit', function () {    
  return {
    link: function (scope, element, attrs) {          
      $(element).nivoSlider();
    }
  }
});

    page.html

    <div id="wrapper" >         
    <div class="slider-wrapper theme-default" >
        <div id="slider" class="nivoSlider" slideit >                  
             <img src="1.png" data-thumb="1.png" alt="" />     
             <img src="2.png" data-thumb="2.png" alt=""   />                 
         </div>
    </div>              
</div>

    index.html

    <!doctype html>

<html lang="en-US" ng-app="App">     <!-- ng-app -->
<head>
<!-- Nivo Slider style sheets -->
<link href="styles/default.css" rel="stylesheet"  type="text/css" media="screen" />
<link  href="styles/nivo-slider.css" rel="stylesheet" type="text/css" media="screen" />
<link href="styles/style.css" rel="stylesheet" type="text/css" media="screen" />  

<!-- angularjs libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-route.js" />

<!-- script .js javascript file -->
<script src="Script.js"></script>

<!-- jquery and nivoslider libraries -->
<script type="text/javascript" src="javascript/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="javascript/jquery.nivo.slider.js"></script>



<body  ng-controller="appController">   <!-- ng-controller -->
<div  ng-view>    </div>                 <!-- div where view will be loaded -->

</body>
</html>