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：光滑的不能正常工作與自定義指令

回答

相關問題