Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

slick execution in ng-repeat #159

Open
frkwhiteangel opened this issue Sep 2, 2016 · 2 comments
Open

slick execution in ng-repeat #159

frkwhiteangel opened this issue Sep 2, 2016 · 2 comments

Comments

@frkwhiteangel
Copy link

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

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

@dashcraft
Copy link

dashcraft commented Sep 15, 2016

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.
`











`

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
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants