2016-03-26 9 views
0

Anglikanlarda yeni bir geliştirici olarak sağlayıcınızla ilgili özel bir sorum var. Kaydırılabilir konteyner ile ilgili özel bir işlevi olan angular-lazy-load tembel yükünü kullanmaya çalışıyorum. Bu kaydırılabilir kap yapılandırma adımında ayarlanmalıdır. İşte bir örnek:Hizmetin açısal-tembel-img'yi denetleyicide oluşturulan dinamik kaydırılabilir bir kapsayıcıyla yapılandırın

var myApp = angular.module('myApp', ['angularLazyImg']); 
 
myApp.config(['lazyImgConfigProvider', 
 
    function(lazyImgConfigProvider) { 
 
    var scrollable = document.querySelector('.container'); 
 
    lazyImgConfigProvider.setOptions({ 
 
     offset: 1, // how early you want to load image (default = 100) 
 
     errorClass: 'error', // in case of loading image failure what class should be added (default = null) 
 
     successClass: null, // in case of loading image success what class should be 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/[email protected]?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>

Ama benim sorum ben kapsayıcı öğesi henüz oluşturulmadı eğer bir kap seçeneği eklemek için yapabileceğiniz ve denetleyici tarafından olacak nasıl?

Şimdiden teşekkür ederiz, lütfen hangi bilgilerin eksik olduğunu bana bildirin.

+0

Yardım edebileceğim github sorununu 4 buldum, lazyImgContainer özniteliğimi konteynere eklemeye çalışacağım https://github.com/Pentiado/angular-lazy-img/issues/4 – jup31

cevap

0

Hile, html dosyasındaki kapsayıcıya bir temeli lazyImgContainer eklemektir. Henüz github'da belgelenmedim, bu yüzden belgeyi almak için bir çekme isteği ekledim.

İlgili konular