【问题标题】:Angular-Carousel Module fails to loadAngular-Carousel 模块无法加载
【发布时间】:2015-08-08 13:26:03
【问题描述】:

我正在尝试在我的网站上实现图片库“angular-carousel”。但是Angular在加载轮播时抛出错误:

未捕获的错误:[$injector:modulerr] http://errors.angularjs.org/1.3.14/$injector/modulerr?p0=myApp&p1=Error%3A%…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A17 %3A381)

我在 Node 和 Express 上运行,我使用 CDN 源进行 angular-carousel:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-carousel/0.3.12/angular-carousel.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-carousel/0.3.12/angular-carousel.js"></script> 

这是我想放置旋转木马的地方:

<ul rn-carousel class="image">
    <li ng-repeat="x in img">
        <img ng-src="/uploads/{{project._id}}/{{x}}"/>
    </li>
</ul>

这是我的控制器部分:

var app = angular.module('myApp', ['ngRoute', 'angular-carousel']);
    app.controller('ProjectController',  function($scope,$http){
        var url = window.location.pathname;
        var id = url.substring(url.lastIndexOf('/') + 1);
        $http.get('/projects_view/'+id).success(function(data){ 
            $scope.project = data;
        });
        $http.get('/getpics/'+id).success(function (files){
            $scope.img = files;             
        });         
    });

没有轮播图像加载完美。 希望得到帮助:)

【问题讨论】:

  • 我认为您缺少angular-touch.js 参考
  • 是的,这解决了错误!但是那里仍然没有画廊!?我是不是执行错了?

标签: javascript angularjs angular-carousel


【解决方案1】:

你错过了angular-touch.js,因为在创建angular-carousel 模块时它需要ng-touch 依赖,这就是为什么在创建angular-carousel 模块时它会搜索ngTouch 模块。并且那里不可用,所以 angular 会引发 $injector/modulerr 错误。

代码

angular.module('angular-carousel', [
    'ngTouch',
    'angular-carousel.shifty'
]);

angular-carousel.js API 中的代码link here

【讨论】:

  • 感谢您解决错误!知道为什么我仍然看不到旋转木马吗?不再抛出错误,但没有图像。
  • @Wandkleister files 是否包含文件集合数组?
  • 这是一个文件名数组,我在 ng-repeat 中使用。
  • 它可以列出一个文件夹中的所有图像。但是轮播需要一组文件而不是路径,对吗?您有解决方法的想法吗?
  • @Wandkleister 你是对的,你需要返回所有fileName,通过像$scope.img = ["a.jpg", "b.jpg"];一样循环应用于每个元素
猜你喜欢
  • 1970-01-01
  • 2020-01-11
  • 2016-12-13
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-06-04
  • 1970-01-01
相关资源
最近更新 更多