javascript - Configure the service angular-lazy-img with a dynamic scrollable container generated on controller -


as new developer on angularjs have specific question regarding provider. i'm trying use lazy load angular-lazy-load has specific functionality regarding scrollable container. scrollable container should set in config step. here example :

var myapp = angular.module('myapp', ['angularlazyimg']);  myapp.config(['lazyimgconfigprovider',    function(lazyimgconfigprovider) {     var scrollable = document.queryselector('.container');      lazyimgconfigprovider.setoptions({        offset: 1, // how want load image (default = 100)        errorclass: 'error', // in case of loading image failure class should added (default = null)        successclass: null, // in case of loading image success class should added (default = null)        onerror: function(image) {}, // function fired on loading error        onsuccess: function(image) {}, // function fired on loading success        container: angular.element(scrollable)      });    }  ]);    myapp.controller('lazyctrl', ['$scope',    function($scope) {      $scope.images = [{        url: "https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded&a"      }, {        url: "http://www.skrenta.com/images/stackoverflow.jpg"      }, {        url: "http://sourcingrecruitment.info/wp-content/uploads/2015/05/stackoverflow.png"      }, {        url: "http://gillespaquette.ca/images/stack-icon.png"      }, {        url: "http://www.iconsdb.com/icons/preview/black/stackoverflow-3-xxl.png"      }, {        url: "https://avatars0.githubusercontent.com/u/139426?v=3&s=400"      }, {        url: "http://gillespaquette.ca/images/stack-icon.png"      } ];    }  ]);
.container {    overflow: scroll;    height: 200px;    position: absolute;  }
<!doctype html>  <html lang="en">  <head>    <meta charset="utf-8">    <title>example - example-guide-concepts-1-production</title>    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>    <script src="https://rawgit.com/pentiado/angular-lazy-img/master/release/angular-lazy-img.js"></script>  </head>  <body ng-app="myapp">    test lazy image    <div ng-controller="lazyctrl">      <div class="container">        <div ng-repeat="image in images">          <img width="100px" height="100px" lazy-img="{{image.url}}" />        </div>      </div>    </div>  </body>

but question how can add container option if container element not yet created , controller ?

thanks in advance, please let me know informations missing answer.

ok trick add attribut lazyimgcontainer container in html file. not yet documented in github have added pull request documented.


Comments

Post a Comment