以角度将设置传递给光滑的轮播指令答案

【问题标题】：Passing settings to slick carousel directive in angular以角度将设置传递给光滑的轮播指令
【发布时间】：2015-09-23 12:41:32
【问题描述】：

我正在尝试将 slick carousel 集成到我的 Angular 应用程序中。 Slick 已经有一个指令，所以我唯一需要在我的 html 中做的是：

<slick>
    <div ng-repeat="item in ctrl.list">
        <img ng-src="{{item.image}}">
    </div>
</slick>

好的，这样就可以了。但是现在如果我想传递一些设置以将它们添加为<slick> 元素上的属性

<slick infinite=true speed=300 slides-to-show=4 slides-to-scroll=4>

这也有效，但我想从我的 Angular 应用程序中传递这些设置，而不是在 html 中传递有关如何执行此操作的任何建议？尝试通过这样的设置：

myApp.controller('MainCtrl', ['$scope', function($scope) {
    $scope.slickConfig = {
        "infinite": true,
        "speed": 300,
        "slides-to-show": 4,
        "slides-to-scroll": 4
    };
}])

但它给了我这个错误：

Error: [$compile:multidir] Multiple directives [ngController, slick] asking for new/isolated scope on: <slick ng-controller="MainCtrl">

【问题讨论】：

标签： angularjs angularjs-directive carousel slick.js

【解决方案1】：

我对 slick 不熟悉，但根据他们的 gitHub，它类似于

$scope.slickConfig = {
        infinite: true,
        speed: 300,
        slides-to-show: 4,
        slides-to-scroll: 4
};

更新：看来您需要在 HTML 中添加配置，例如

<slick settings="slickConfig">

【讨论】：

我更新了一点问题。无论如何，这给了我Unexpected token - 的错误，因为slides-to-show 中的“-”
我更详细地阅读了文档并解决了它。有些事情文档没有提到，所以我用使其工作所需的所有代码回答了我自己的问题。包括一个更正，因为在文档中到 jQuery 库的路径是错误的。谢谢！
没问题，很高兴我能带领你走上正确的道路

【解决方案2】：

为了正常工作，在应用程序中需要这样的东西：

myAppModule.controller('MainCtrl', ['$scope', function($scope) {
    $scope.slickConfig = {
        autoplay: true,
        draggable: false,  
        autoplaySpeed: 3000,
        slidesToShow: 4,
        slidesToScroll: 4,
        method: {},
        event: {
            beforeChange: function (event, slick, currentSlide, nextSlide) {
            },
            afterChange: function (event, slick, currentSlide, nextSlide) {
            }
        }
    };  
}])

类似这样的东西，在 html 中：

<!DOCTYPE html>
<html lang="en" ng-app='MyApp'>
<head>
    <meta charset="UTF-8">
    <title>Slider Practice</title>
    <link rel="stylesheet" href="bower_components/slick-carousel/slick/slick.css">
    <link rel="stylesheet" href="bower_components/slick-carousel/slick/slick-theme.css">
</head>
<body ng-controller="MainCtrl as ctrl">

    <slick 
            settings="slickConfig"
            data="number">
        <div>
            <img src="img/img_01.jpg">
        </div>
        <div>
            <img src="img/img_02.jpg">
        </div>
        <div>
            <img src="img/img_03.jpg">
        </div>
        <div>
            <img src="img/img_04.jpg">
        </div>
        <div>
            <img src="img/img_05.jpg">
        </div>
        <div>
            <img src="img/img_06.jpg">
        </div>
        <div>
            <img src="img/img_07.jpg">
        </div>
        <div>
            <img src="img/img_08.jpg">
        </div>
        <div>
            <img src="img/img_09.jpg">
        </div>
        <div>
            <img src="img/img_10.jpg">
        </div>
    </slick>

    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/slick-carousel/slick/slick.js"></script>
    <script src="bower_components/angular-slick-carousel/dist/angular-slick.min.js"></script>
    <script src="js/app.js"></script>

</body>
</html>

【讨论】：