Question

最初，我让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>

非常感谢任何帮助！

感谢，贾斯汀

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

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

1 个答案: