AngularJS、jQuery、HTML、CSS、および Bootstrap を使用して Web アプリを作成しています。Apache2 サーバーにある JSON からいくつかの画像リンクを選択し、それらを使用してメイン ページでそれらの画像をレンダリングしたいと考えています。 . また、カルーセルのようにスワイプしたいと思います。それを機能させるために、 iDangero.us Swiperを使用しようとしています。
3 つの分割された div で画像を選択すると、問題はありません。画像を取得すると、通常は好きなようにスワイプできます。私は以下のようにします：
Main.html:
<div ng-init="initGetRequestMain()">
<div class="swiper-slide" ng-click="swipers()"
style="{{data.background1}}"></div>
<div class="swiper-slide" ng-click="swipers()"
style="{{data.background2}}"></div>
<div class="swiper-slide" ng-click="swipers()"
style="{{data.background3}}"></div>
<script src="scripts/custom/main/swipers.js"></script>
</div>
Swiper を使用して、ある画像から別の画像にスワイプしましたが、正常に機能しているようです。これは jQuery プラグインであり、このリンクでいくつかのデモを見ることができます。
Swipers.js:
angular.module('swipers', [])
.controller('',[
$(document).ready(function (){
var swiper = new Swiper('.swiper-container',{
direction: 'horizontal',
pagination: '.swiper-pagination',
paginationClickable: true
})
})]);
ジョンソン:
"background1":"background-image: url(images/img1.jpg)",
"background2":"background-image: url(images/img2.jpg)",
"background3":"background-image: url(images/img3.jpg)"
mainController.js:
myApp.controller('MainController', ["$scope","$http",
function($scope,$http){
$scope.initGetRequestMain = function(){
$http.get('http://localhost/main.json').success(function(data){
$scope.data=data;
})
}
}]);
問題はng-repeat、3 つの分割された div の代わりに使用しようとすると、それらが表示されなくなり、完全に読み込まれる前に Swiper スクリプトがトリガーされることです。コンソールまたは JSON (JSONLint で検証済み) にエラーはありません。以下に、両方の状況での出力の 2 つのスクリーンショットを追加しました。
3 つの分割された div での作業:
ng-repeat で動作しない:
ng-repeatこれは、以前と同じコントローラーと同じ Swiper スクリプトを維持して作業を行おうとするコードです。
Main.html:
<div ng-init="initGetRequestMain()">
<div ng-repeat="slide in data.slides" isLoaded="">
<div class="swiper-slide" style="{{slide.background}}"
ng-click="swipers()"></div>
</div>
<script type="text/javascript-lazy" src="scripts/custom/main/swipers.js"></script>
</div>
mainJson.json:
"slides":[
{"background":"background-image:url('images/img1.jpg')"},
{"background":"background-image:url('images/img2.jpg')"},
{"background":"background-image: url('images/img3.jpg')"}
],
スクリプトをトリガーする前に画像をロードするために、2 つのカスタム ディレクティブを使用しようとしています。
isLoaded最後のng-repeat要素がいつロードされて設定されるかを教えてくれますpageIsLoaded = true;:
myApp.directive('isLoaded', function (){
return{
scope:true,
restrict: 'A', //Attribute type
link: function (scope, elements, arguments){
if (scope.$last === true) {
scope.pageIsReady = true;
console.log('page Is Ready!');
}
}
}
})
gettingTheScriptスクリプトを待機しpageIsLoaded = true;てロードします。
myApp.directive('src', function (){
return{
scope:true,
restrict: 'A', //Attribute type
link: function (scope, elements, arguments){
scope.$on(pageIsReady===true, function(){
if (attr.type === 'text/javascript-lazy'){
scope.scriptLink = arguments.src;
}
})
},
replace: true, //replaces our element
template: '{{scriptLink}}'
}
})
彼らは私の問題を解決していないようです。最初のものを作るときも見えませんconsole.log('page Is Ready!');。
この種の問題を回避するために、ページが読み込まれた後に Swiper のようなスクリプトをトリガーする必要があるときに、いくつかの問題が発生します。私の画像には高さがないようです。ng-repeat問題は、スクリプトをトリガーする前に完全にロードされていないことが原因だと思います。
私は何を間違っていますか？より良い解決策はありますか？