当我用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插件,您可以在this link看到一些演示.
Swipers.js：
angular.module('swipers',[])
.controller('',[
$(document).ready(function (){
var swiper = new Swiper('.swiper-container',{
direction: 'horizontal',pagination: '.swiper-pagination',paginationClickable: true
})
})]);
JSON：
"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验证).下面我在两种情况下添加了我的输出截图.
使用3个分隔的div：
不使用ng-repeat：
这是代码,我尝试使ng重复工作保持相同的控制器和与之前相同的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!');
}
}
}
})
getsTheScript等待pageIsLoaded = true;并加载脚本：
myApp.directive('src',function (){
return{
scope:true,//Attribute type
link: function (scope,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(‘页面就绪！’);当做第一个.
在页面加载之后,当我必须触发一个像Swiper这样的脚本,以避免这些问题,我只是有一些麻烦.我的图像似乎没有高度.我认为这个问题是在触发我的脚本之前由ng-repeat不完全加载引起的.
我究竟做错了什么？有更好的解决方案吗？
解决方法
话虽如此,诀窍推迟了jQuery插件的调用,直到Angular渲染了DOM为止.
首先,将你的swiper插件放在一个指令中：
.directive('swiper',function($timeout) {
return {
link: function(scope,element,attr) {
//Option 1 - on ng-repeat change notification
scope.$on('content-changed',function() {
new Swiper(element,{
direction: 'horizontal',paginationClickable: true);
}
//Option 2 - using $timeout
$timeout(function(){
new Swiper(element,paginationClickable: true);
});
}
};
})
对于选项1,您需要修改的isLoaded指令
myApp.directive('isLoaded',function (){
return{
scope:false,//don't need a new scope
restrict: 'A',arguments){
if (scope.$last) {
scope.$emit('content-changed');
console.log('page Is Ready!');
}
}
}
})
最后,您的标记(请注意从isLoaded更改为已加载….这可能是您没有看到通知的原因).
<div ng-init="initGetRequestMain()" swiper>
<div ng-repeat="slide in data.slides" is-loaded>
<div class="swiper-slide" style="{{slide.background}}"
ng-click="swipers()"></div>
</div>
</div>
如前所述,大多数进行轮播功能的jQuery插件都不会很好地处理对DOM(即新元素)的更改.即使有两个选项,如果在首次呈现ng重复后更改模型,您可能会看到意外的事情.但是,如果您的模型是静态的,这将适用于您.如果您的型号发生变化,那么您可能希望搜索更“角”的转盘指令.
