Slick.js 未正确初始化

Posted 2023-05-09

【中文标题】Slick.js 未正确初始化

【英文标题】：Slick.js not initilizing properly

【发布时间】：2020-04-21 14:47:15

【问题描述】：

我正在尝试在 plunker 中重现我在 AngularJs webapp 中使用 Slick.js 时遇到的问题。 Slick.js 可以在我的网站上运行，但不能在 plunker 上运行。我不知道我错过了什么。

请看plunker：http://plnkr.co/edit/35Sj5O?p=preview

这是控制器中的主要代码：

<div class="slick-container" slick>
        <div class="item" ng-repeat="photo in boat.photos" is-loaded>
                <img ng-src="photo.url" />
        </div>
    </div>

指令：

.directive('slick', function() 
  function link(scope, element, attrs)               
    $(document).ready(function () 
     console.log("Slick called");
     scope.$on('content-changed', function() 
      console.log("Slick initialized");
      $(".slick-container").not('.slick-initialized').slick(
        adaptativeHeight: true,
         dots: true,
         lazyLoad: 'ondemand');
      );               
    );
  ;

  return         
      link: link        
  ;
)


.directive('isLoaded', function () 
  return 
        restrict: 'A',
        link: function(scope, elem, attrs) 
            if (scope.$last) 
            scope.$emit('content-changed');
            console.log('page Is Ready!');
          
        
   ;
)

【参考方案1】：

使用以下代码更新您的directive.js 文件

'use strict';

/* Directives */


angular.module('myApp.directives', [])  

.directive('isLoaded', function () 
  return 
        restrict: 'A',
        link: function(scope, elem, attrs) 
            if (scope.$last) 
            scope.$watch('content-changed', function ()
              $(".slick-container").not('.slick-initialized').slick(
                adaptativeHeight: true,
                dots: true,
                lazyLoad: 'ondemand');
             )
            console.log('page Is Ready!');
          
        
   ;
);

【讨论】：

出于开发目的没关系，但出于性能目的，我想避免在生产中使用大量“$watch”。没有手表可以让它工作吗？为什么它在我的开发环境中运行而不是在 plunker 中运行？