Question

我试图将slick carousel集成到我的角度应用程序中。 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>

这也有效，但我想从我的角度应用程序中传递这些设置，而不是在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">

Answer 1

我不熟悉光滑，但根据他们的gitHub，它就像是

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

更新：您似乎需要在HTML中添加配置

<slick settings="slickConfig">

Answer 2

为了正常工作，必须在app中使用以下内容：

namespace Application;

use Zend\Mvc\MvcEvent;
use Zend\EventManager\EventInterface;
use Zend\ModuleManager\Feature\AutoloaderProviderInterface;
use Zend\ModuleManager\Feature\ConfigProviderInterface;
use Zend\ModuleManager\Feature\BootstrapListenerInterface;
use Zend\ModuleManager\Feature\InitProviderInterface;
use Zend\ModuleManager\ModuleManagerInterface;

class Module implements AutoloaderProviderInterface, ConfigProviderInterface, BootstrapListenerInterface, InitProviderInterface
{
    /**
     * Setup module layout
     *
     * @param  $moduleManager ModuleManager
     */
    public function init(ModuleManagerInterface $moduleManager)
    {
        $moduleManager->getEventManager()->getSharedManager()->attach(__NAMESPACE__, MvcEvent::EVENT_DISPATCH, function (MvcEvent $e) {
            $e->getTarget()->layout('layout/layout');
        });
    }

    /**
     * Listen to the bootstrap event
     *
     * @param EventInterface $e
     */
    public function onBootstrap(EventInterface $e)
    {
    }

    /**
     * @return array|\Traversable
     */
    public function getConfig()
    {
        return include __DIR__.'/config/module.config.php';
    }

    /**
     * Return an array for passing to Zend\Loader\AutoloaderFactory.
     *
     * @return array
     */
    public function getAutoloaderConfig()
    {
        return [
            'Zend\Loader\ClassMapAutoloader' => [
                __DIR__.'/autoload_classmap.php',
            ],
            'Zend\Loader\StandardAutoloader' => [
                'namespaces' => [
                    __NAMESPACE__ => __DIR__.'/src/'.__NAMESPACE__,
                ],
            ],
        ];
    }
}

这样的事情，在html中：

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) {
            }
        }
    };  
}])

将设置传递给角度为

2 个答案: