实现了 AngularJS 视图，现在 Nivo Slider 不起作用答案

【问题标题】：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>

【讨论】：

工作完美！！