Question

我有以下AJS代码：

HTML：

＆＃13;

 <slick init-onload=true slickSlider infinite=true slides-to-show=3 slides-to-scroll=3 settings="slickConfig" 
            data="images">
              <div class="slick-item" ng-repeat="image in images">
          
              <div class="Slide-Id">
                <p class="slide-id">{{images.indexOf(image)+1}}/{{images.length}}</p>
                </div>
                <img my-slick="" class="images-class" ng-src="{{image.url}}" height="100px" width="100px" />
         
              </div>
              </div>
              </slick>

＆＃13;

指令：

＆＃13;

(function() {
    'use strict';
 
    angular
        .module('myApp')
        .directive('mySlick', mySlick);
 
    mySlick.$inject = ['$rootScope','$compile'];
 
    function mySlick($rootScope,$compile) {
        console.log("hello....directive..")
       
        var linker = function (scope, element, attrs) {
            scope.$watch('images', function(){
                console.log("Attrs/..." + attrs + "..element.." + element);
                $compile(element.contents())(scope);
                //scope.$apply();
            });
        };
        return {
            controller: 'DetailCtrl',
            restrict: "EA",
            scope: {images: '@'},
            link: linker
        };
    }
})();

＆＃13;

虽然它观察/观察图像的变化，但它无法重新绘制DOM。我该如何实现？我正在尝试找到 - Slick Carousel Angular - dynamic data loading

的解决方案

如何重新编译/重新编译光滑以使用新数据更新DOM

0 个答案: