javascript - Angular-Slick 与 Grunt

标签 javascript angularjs gruntjs yeoman slick.js

我很难获得 Angular-Slick在 Grunt 使用 Yeoman Angular generator 构建页面后正确加载到我的页面上。当我在本地提供文件时,一切看起来都很完美,但是在缩小/丑化之后,一切都变成了梨形。它应该看起来像这样,并且在上菜时是这样的:

enter image description here

这是构建和托管后的所有内容。这些图像根本不可见,看起来它们在 View 之外相互堆叠:http://jamesiv.es/alpha

依赖关系:

{
  "name": "v2",
  "version": "0.0.0",
  "dependencies": {
    "angular": "^1.3.0",
    "bootstrap-sass-official": "^3.2.0",
    "angular-resource": "^1.3.0",
    "angular-route": "^1.3.0",
    "angular-google-maps": "~2.1.5",
    "angular-bootstrap": "~0.13.1",
    "particles.js": "~2.0.0",
    "slick-carousel": "~1.5.8",
    "angular-slick-carousel": "~3.0.2"
  },
  "devDependencies": {
    "angular-mocks": "^1.3.0"
  },
  "appPath": "app",
  "moduleName": "v2App",
  "overrides": {
    "bootstrap": {
      "main": [
        "less/bootstrap.less",
        "dist/css/bootstrap.css",
        "dist/js/bootstrap.js"
      ]
    }
  },
  "resolutions": {
    "angular": "^1.3.0"
  }
}

Grunt 文件:

 grunt.registerTask('build', [
    'clean:dist',
    'wiredep',
    'useminPrepare',
    'concurrent:dist',
    'autoprefixer',
    'ngtemplates',
    'concat',
    'ngAnnotate',
    'copy:dist',
    'cdnify',
    'cssmin',
    'uglify',
    'filerev',
    'usemin',
    'htmlmin'
  ]);

'slickCarousel' 被注入(inject)到模块中。这是用于 Slick 的主 Controller :

angular.module('v2App')
  .controller('MainCtrl', function ($scope) {

    $scope.images = [
      "images/logos/angular.png",
      "images/logos/android.png",
      "images/logos/appengine.png",
      "images/logos/atom.png",
      "images/logos/bootstrap.png",
      "images/logos/bower.png"
      ];
  });

我的应用程序配置为正确的页面,从这样的 View 中进行了流畅的渲染:

  <body ng-app="v2App">
    <div ng-view="" class="content"></div>
  </body>

然后我的 View 中就出现了 Slick。我已将“图像”定义为数据,因为它是从中提取图像的位置:

  <div class="row">
    <div class="col-lg-12">
      <slick data="images" dots="false" infinite="true" speed="300" slides-to-show="5" touch-move="false" slides-to-scroll="1">
        <div ng-repeat="image in images">
            <img class="img-responsive" src="{{image}}">
        </div>
      </slick>
    </div>
  </div>

我已经尝试了许多修复此问题的方法,例如使用 $timeout 和使用数据加载切换,但似乎没有任何方法可以修复它。我几乎可以肯定这是由 Grunt 引起的,但我可能是错的。

如有任何建议,我们将不胜感激。我有点卡住了。

最佳答案

这是我使用的 CSS,没有它...Angular Slick 将会崩溃。 如果您仍然有兴趣使用它...这是一个很棒的库,我一遍又一遍地使用它,因此值得让它为您的工具箱工作。

.slick-slider
    display: block
    float left
    width 100%
    height 160px
    overflow hidden
    padding: 0
    margin: 0 0 10px 0
    background $white
    border-top $black-border
    border-bottom $black-border
    box-sizing: border-box
    -moz-box-sizing: border-box
    -webkit-touch-callout: none
    -webkit-user-select: none
    -khtml-user-select: none
    -moz-user-select: none
    -ms-user-select: none
    user-select: none
    -ms-touch-action: none
    -webkit-tap-highlight-color: transparent
    z-index 99

.slick-list
    position: relative
    overflow: hidden
    display: block
    margin: 0
    padding: 0

.slick-list:focus
    outline: none

.slick-loading .slick-list
    background: white url("../img/ajax-loader.gif") center center no-repeat

.slick-list.dragging
    cursor: pointer
    cursor: hand

.slick-slider .slick-list,
.slick-track,
.slick-slide,
.slick-slide img
    -webkit-transform: translate3d(0, 0, 0)
    -moz-transform: translate3d(0, 0, 0)
    -ms-transform: translate3d(0, 0, 0)
    -o-transform: translate3d(0, 0, 0)
    transform: translate3d(0, 0, 0)

.slick-track
    position: relative
    left: 0
    top: 0
    display: block
    zoom: 1

.slick-track:before,
.slick-track:after
    content: ""
    display: table

.slick-track:after
    clear: both

.slick-loading .slick-track
    visibility: hidden

.slick-slide
    float: left
    height: 100%
    min-height: 1px
    display: none

.slick-slide img
    display: block

.slick-slide.slick-loading img
    display: none

.slick-slide video
    display: block

.slick-slide video.slick-loading
    display: none

.slick-slide.dragging img
    pointer-events: none

.slick-initialized .slick-slide
    display: block

.slick-loading .slick-slide
    visibility: hidden

.slick-vertical .slick-slide
    display: block
    height: auto

如果在缩小之前一切都很好,那么我建议将“angular-slick/dist/slick.js”和“slick-carousel/slick/slick.js”包装在 IIFE 中!

这是file在存储库中,并且它不适合缩小...

关于javascript - Angular-Slick 与 Grunt,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31665506/

相关文章:

javascript - JS 分割日语字符串

javascript - 重置先前选择的链接背景颜色

javascript - 这个 Angular 代码有什么问题?

javascript - 如何测试 Grunt 插件

gruntjs - 在 Grunt 中按顺序运行任务

javascript - 青鸟的 promise ——然后终于

javascript - 同一页面上的 AngularJS 多个 Controller - 只有第一个有效

javascript - 如何根据变量更改 ng-view

javascript - load-grunt-config 未找到目标任务

javascript - 伪类在 IE 中不适用于 jQuery Accordion