Angularjs：光滑的不能正常工作与自定义指令

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

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

来源

2016-10-22 nosthertus

有一个转盘滚动浏览多个元素，而不是1好像那种初始化sequance问题。

包装你光滑的逻辑与transclusion单独使用指令功能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>

来源

2016-10-22 14:12:23

我不知道我不得不使用transclusion，说实话，我不知道如何使用transclusion所以我用的一部分你的代码，使其工作..非常感谢，现在我真的想学习关于跨越的好技巧 – nosthertus

Angularjs：光滑的不能正常工作与自定义指令

回答

相关问题