【问题标题】:Implemented AngularJS views and now Nivo Slider doesn't work实现了 AngularJS 视图,现在 Nivo Slider 不起作用
【发布时间】:2026-02-09 20:25:01
【问题描述】:

最初,我让 Nivo Slider 在这个非营利组织的主页上运行良好,但是当我介绍 AngularJS 视图时……Nivo Slider 和这个 JQuery Advanced News Ticker 坏了。我确定我错过了一些非常明显的东西,但我不确定它是什么。更具体地说,Nivo Slider 只显示加载 gif 而没有加载图像,而 JQuery Advanced News Ticker 根本不起作用。我不确定如何使这个问题更清楚,但我认为它必须是 jQuery 和 AngularJS 之间的一些冲突?还是我没有正确实现视图?

这是 Plunker 中发生的事情的基本概述:Site Example

这里是 nivo 滑块 html 代码:

     <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>

任何帮助将不胜感激!

谢谢, 贾斯汀

【问题讨论】:

    标签: javascript jquery html angularjs nivo-slider


    【解决方案1】:

    在 angularjs 中使用指令。 我在模板中路由视图时使用了以下代码。

    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>
    

    【讨论】:

    • 工作完美!!