slick execution in ng-repeat

[frkwhiteangel]

http://stackoverflow.com/questions/39299307/angular-directory-slick-execution

it wont work if the inside ng-repeat is not finished. how to fix?

[dashcraft]

From a recent experience, you have to call the slick directive and nested div's in a specific manner. This slick directive from my experience, doesn't like being the container for your images. I usually container my directives regardless, but this is how i accomplished something similar.

This scrolls through about 30 images around 1mb apiece, without issue.

Here is an example HTML file for a synced nav using the slick directive. `

<slick class="slider-nav" infinite="true"  init-onload="true" slides-to-show=3 slides-to-scroll=1 as-nav-for='.sliderfor' focus-on-select="true" arrows="false" center-mode="true" variable-width="true" data="images">
<div  ng-repeat="img in images | where:{category:filter} |  orderBy:'sort'">
        <img ng-src="{{img.file_path}}"/>
</div>
</slick>

`

Here is a controller config, but i am extracting it into a service soon.

.controller("ImageCtrl", function image_controller( $scope, $timeout, $stateParams, $filter, $http, $q, $log) { console.log("Image Controller loaded"); console.log($stateParams.category); getImages(); $scope.filter = $stateParams.category;

        function getPromiseImages() {
            var deferred = $q.defer();
            $http.get('/api/images').then(
                function handleSuccess(response) {
                  console.log("Got promise list of images.");
                    deferred.resolve(response.data);
                },
                function handleError(response) {
                    console.log("Promise list of images failed.");
                });
            return deferred.promise;
        }
        function getImages(){
            getPromiseImages().then(function(data){
                $scope.$applyAsync(function(){
                    console.log(JSON.stringify(data));
                    $scope.images = data;   
                }); 
            });
        }

    });`

[wishtreedotpro]

Hi, You just need to use one of the built in option in this directive, it`s written here in github:

For initialization carousel after data is loaded use init-onload property. Example:

<slick init-onload=true data="awesomeThings">
  ...
</slick>

so, just write the correct name of your scope in data attribute.