AngularJS 뷰 구현 및 현재 Nivo 슬라이더가 작동하지 않음

원래이 비영리 단체의 홈페이지에서 Nivo 슬라이더를 훌륭하게 작동 시켰지 만 AngularJS 뷰를 도입함에 따라 Nivo 슬라이더와 JQuery 고급 뉴스 티커 망가 졌어. 나는 정말 명백한 것을 놓치고 있다고 확신하지만, 그것이 무엇인지는 확실치 않습니다. 더 구체적으로 말하면, Nivo Slider는 로딩 gif를 보여 주며 이미지를로드하지 않으며 JQuery Advanced News Ticker는 전혀 작동하지 않습니다. 이 질문을 명확하게하는 방법을 모르겠지만 jQuery와 AngularJS 사이에 충돌이 있다고 가정합니다. 또는보기를 올바르게 구현하지 않습니까?AngularJS 뷰 구현 및 현재 Nivo 슬라이더가 작동하지 않음

여기 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 슬라이더가 작동하지 않음

답변

관련 문제