Slick.js 未正确初始化

Question

我正在尝试在 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!');
          }
        }
   };
})

Answer 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!');
          }
        }
   };
});