Question

我一直在努力寻找一种方法让旋转木马滑动多个元素而不是一个，但是angularjs编译自定义指令的元素，我发现slick的那一刻是可以完成这项工作的好框架，我已经在我的本地文件上测试了成功的结果，但是当我尝试将它加载到服务器上时，所有内容都从cdn加载，浏览器开始多次抛出错误：

Error: a.replace is not a function
Error: w is undefined
Error: a.replace is not a function
Error: w is undefined

页面的代码..就像这样：

<!DOCTYPE html>
<html>
<head>
    <title>styles</title>
    <meta charset="utf-8">

    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
    <link href="https://fonts.googleapis.com/css?family=Raleway:300,400" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body ng-app="test" ng-controller="testController" layout="column" layout-fill>
    <md-content flex layout="column">
        <md-content flex>
            <div class="focusPlan">
                <div class="focus">
                    <p>Focus</p>
                </div>
                <div class="plans">
                    <card-plans button="Get"></card-plans>
                    <card-plans button="Get"></card-plans>
                    <card-plans button="Get"></card-plans>
                    <card-plans button="Get"></card-plans>
                    <card-plans button="Get"></card-plans>
                    <card-plans button="Get"></card-plans>
                </div>
            </div>
            <div class="focusPlan">
                <div class="focus">
                    <p>Focus</p>
                </div>
                <div class="plans">
                    <card-plans button="Get"></card-plans>
                    <card-plans button="Get"></card-plans>
                    <card-plans button="Get"></card-plans>
                    <card-plans button="Get"></card-plans>
                    <card-plans button="Get"></card-plans>
                    <card-plans button="Get"></card-plans>
                </div>
            </div>
            <div class="focusPlan">
                <div class="focus">
                    <p>Focus</p>
                </div>
                <div class="plans">
                    <card-plans button="Get"></card-plans>
                    <card-plans button="Get"></card-plans>
                    <card-plans button="Get"></card-plans>
                    <card-plans button="Get"></card-plans>
                    <card-plans button="Get"></card-plans>
                    <card-plans button="Get"></card-plans>
                </div>
            </div>
            <div class="focusPlan">
                <div class="focus">
                    <p>Focus</p>
                </div>
                <div class="plans">
                    <card-plans button="Get"></card-plans>
                    <card-plans button="Get"></card-plans>
                    <card-plans button="Get"></card-plans>
                    <card-plans button="Get"></card-plans>
                    <card-plans button="Get"></card-plans>
                    <card-plans button="Get"></card-plans>
                </div>
            </div>
        </md-content>
    </md-content>

    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="https://code.jquery.com/jquery-migrate-3.0.0.min.js"></script>
    <script src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>

    <script src="../cards/people/people-directive.js"></script>
    <script src="../cards/plans/plans-directive.js"></script>
    <script src="../cards/events/events-directive.js"></script>
    <script src="../sections/blogs/blogs-directive.js"></script>
    <script src="../sections/posts/posts-directive.js"></script>

    <script>
        /*
         * Angular's application instance
         */
        (function(angular, $){
            var app = angular.module("test", ["ngMaterial", "test-directives"]);

            app.config(["$mdThemingProvider", "$mdIconProvider", function($mdThemingProvider, $mdIconProvider){
                $mdThemingProvider.theme('default')
                    .primaryPalette('light-blue',{
                        'default':'400'
                    });

                $mdIconProvider.defaultIconSet("mdi.svg");
            }]);

            app.controller("testController", ["$scope", "$mdSidenav", function($scope, $sidenav){
                $scope.toggleMenu = function(){
                    $sidenav("menu").toggle();
                };

                $(".plans").slick({
                    infinite: true,
                    slidesToShow: 3,
                    slidesToScroll: 3
                });

                $scope.gridMode = false;
            }]);
        })(angular, $);
    </script>
</body>
</html>

在这个视图中我只有一个多次调用的自定义指令<card-plans>，它实际上包含很少的模板逻辑。

没有光滑的项目看起来像这样：

我想要的只是让旋转木马滚动多个元素而不是1乘1

Answer 1

看起来像初始序列问题。

使用postlink函数

将您的光滑逻辑包装到单独的指令中并进行转换

.directive('carousel', function(){
    return function(){
        restrict: 'E',
        transclude: true,
        link: function(scope, el, attrs, ctrl, transclude) {
            el.append(transclude());
            elem.children().slick(/*stuff*/);
            scope.$on('$destroy', function(){/* slick destroy*/});
        }
    };
});

<carousel>
   <card-plans></card-plans>
   ....
</carousel>

Angularjs：光滑的自定义指令无法正常工作

1 个答案: