實現AngularJS的意見，現在Nivo Slider不工作

最初，我有Nivo Slider在這個非盈利的主頁上工作很好，但隨後我介紹了AngularJS的意見...... Nivo Slider和這個JQuery高級新聞代碼打破。我確信我錯過了一些非常明顯的東西，但我不確定它是什麼。更具體地說，Nivo Slider僅顯示加載gif並且不加載圖像，而JQuery Advanced News Ticker完全不起作用。我不知道如何使這個問題更清楚，但我認爲它必須是jQuery和AngularJS之間的一些衝突？或者我沒有正確實現視圖？實現AngularJS的意見，現在Nivo Slider不工作

下面是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>

任何幫助將不勝感激！

感謝，在angularjs 賈斯汀

來源

2014-07-19 Justin

使用指令。我在模板中路由視圖時使用了以下代碼。

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

來源

2014-09-18 05:01:17 vinay

工作完美！ –

實現AngularJS的意見，現在Nivo Slider不工作

回答

相關問題