我正在使用AngularJS,jQuery,HTML,CSS和Bootstrap制作一个网络应用程序,我想从位于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插件,您可以在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不完全加载引起的.

我究竟做错了什么？有更好的解决方案吗？

.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);
            });
 
        }
    };
})

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!');
        }
     }   
   }
})

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