实现了AngularJS视图，现在Nivo Slider不能工作了

Implemented AngularJS views and now Nivo Slider doesn't work

本文关键字：Slider 不能 工作 Nivo AngularJS 视图 实现 现在      更新时间：2023-09-26

最初，我让Nivo滑块在这个非营利组织的主页上工作得很好，但是当我引入AngularJS视图时…Nivo滑块和这个JQuery高级新闻播报器坏了。我肯定我错过了一些很明显的东西，但我不确定是什么。更具体地说，Nivo滑块只是显示加载gif，而不是加载图像和JQuery高级新闻Ticker根本不起作用。我不知道如何使这个问题更清楚，但我认为它必须是一些冲突之间的jQuery和AngularJS?或者我没有正确实现视图?

以下是普朗克的基本概况:网站示例

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

任何帮助都将非常感激!

谢谢,贾斯汀

在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>
相关文章：