Angularjs：slickがカスタムディレクティブで正しく動作しない

複数の要素を1つではなく複数の要素にスライドさせる方法を探していましたが、slickという瞬間にangularjsからカスタムディレクティブがコンパイルされていますこの仕事をすることができる良いフレームワークであり、私は成功した結果で私のローカルファイルをテストしましたが、CDNからロードするすべてのものをロードしようとすると、ブラウザは何度もエラーをスローするようになります：Angularjs：slickがカスタムディレクティブで正しく動作しない

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>

このビューでは、複数回呼び出される1つのカスタムディレクティブ（<card-plans>）しかありません。実際にはテンプレートでほとんどロジックが含まれていません。

ツルツルなしのアイテムは次のようになります。

と私が望むすべてがちょうど1

出典

2016-10-22 nosthertus

することにより、複数の要素の代わりに、1をスクロールするカルーセルを持つことであるは、init sequanceの問題のようなもののように思えます。

は、ポストリンク機能

.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についての良いトリックを学びたい – nosthertus

Angularjs：slickがカスタムディレクティブで正しく動作しない

答えて

関連する問題