jQuery的刷卡脚本后伍重复元素被加载运行 - AngularJS [英] jQuery Swiper Script to Run after Ng-Repeat elements are loaded - AngularJS

问题描述

我有，我是不是能够解决，甚至希望在计算器上其他职位的问题。

我使用的是做一个web应用程序的 AngularJS 的jQuery ，HTML，CSS和引导，我想挑一些图片链接从我的 JSON 位于在的Apache2服务器并以呈现在我的主页这些图像使用它们。我也想刷卡他们就像一个旋转木马。为了使这项工作，我尝试使用 iDangero.us刷卡。

当我拿起我的图片是 3分离的div 我没有问题。我让我的图像，然后我就可以正常刷卡他们，因为我想要的。我这样做如下图所示：

main.html中：

 ＆LT; D​​IV NG-的init =initGetRequestMain（）＆GT;  ＆LT; D​​IV CLASS =刷卡滑NG点击=swipers（）
              风格={{data.background1}}＆GT;＆LT; / DIV＆GT;
  ＆LT; D​​IV CLASS =刷卡滑NG点击=swipers（）
              风格={{data.background2}}＆GT;＆LT; / DIV＆GT;
  ＆LT; D​​IV CLASS =刷卡滑NG点击=swipers（）
              风格={{data.background3}}＆GT;＆LT; / DIV＆GT;   ＆LT;脚本SRC =脚本/自定义/主/ swipers.js＆GT;＆LT; / SCRIPT＆GT;
＆LT; / DIV＆GT;
 

  

我用刷卡从图像到另一个刷卡，似乎工作，因为它应该。这是一个jQuery插件，你可以看到在此链接。

Swipers.js：

  angular.module（'swipers'，[]）
       .controller（''，[
        $（文件）。就绪（函数（）{
           VAR刷卡=新的刷卡（'刷卡容器'，{
           方向：水平，
           分页：'.swiper-分页，
           paginationClickable：真
       }）
}）]）;
 

JSON：

 background1：背景图像：网址（图像/ img1.jpg），
background2：背景图像：网址（图像/ img2.jpg），
background3：背景图像：网址（图像/ img3.jpg）
 

mainController.js：

  myApp.controller（'MainController'，[$范围，$ HTTP
                  功能（$范围，$ HTTP）{      $ scope.initGetRequestMain =功能（）{       $ http.get（'HTTP：//localhost/main.json'）.success（功能（数据）{         $ scope.data =数据;
       }）
      }
  }]）;
 

问题是，当我尝试使用 NG-重复，而不是3分离的div，我看不到他们了，我的刷卡脚本触发他们是前完全读取。我没有在错误我的控制台无论是在我的JSON（验证是 JSONLint ）。下面，我加2截图我outuput在这两种情况下。

与3分离div的工作：

与NG-重复不工作：

  

下面，我粘贴一些code，其中我尽量让纳克重复的工作保持相同的控制器和相同的刷卡脚本之前：

main.html中：

 ＆LT; D​​IV NG-的init =initGetRequestMain（）＆GT;       ＆LT; D​​IV NG重复=幻灯片中data.slidesisLoaded =＆GT;
           ＆LT; D​​IV CLASS =刷卡滑的风格={{slide.background}}
                       NG-点击=swipers（）＆GT;＆LT; / DIV＆GT;
       ＆LT; / DIV＆GT;    ＆LT;脚本类型=文/ JavaScript的懒惰SRC =脚本/自定义/主/ swipers.js＆GT;＆LT; / SCRIPT＆GT;
  ＆LT; / DIV＆GT;
 

mainJson.json：

 幻灯片：[
            {背景：背景图像：网址（图像/ img1.jpg'）}，
            {背景：背景图像：网址（图像/ img2.jpg'）}，
            {背景：背景图像：网址（图像/ img3.jpg'）}
]
 

  

为了触发脚本之前得到加载我的图片，我想用2自定义指令。

isLoaded 当最后NG重复元素被加载并告诉我套 pageIsLoaded = TRUE; ：

  myApp.directive（'isLoaded'，函数（）{   返回{
     适用范围：真，
     限制：'A'，//属性类型
     链接：功能（范围，元素，参数）{        如果（$范围。最后===真）{
            scope.pageIsReady = TRUE;
            的console.log（页面准备好了！'）;
         }
     }
   }
}）
 

gettingTheScript 等待 pageIsLoaded = TRUE; 并加载脚本：

  myApp.directive（'src'中，函数（）{     返回{
       适用范围：真，
       限制：'A'，//属性类型
       链接：功能（范围，元素，参数）{            （范围。$上（pageIsReady ===真，功能）{
                   如果（attr.type ===文/ JavaScript的懒'）{                       scope.scriptLink = arguments.src;
                    }
             }）
         }，
         更换：真正的，//我们替换元素
         模板：{{scriptLink}}'
       }
  }）
 

  

他们似乎并没有解决我的问题，我不能也看到的console.log（页面准备好了！'）; 做第一个，当<。 / p>
  
  

我只是有一些麻烦时，我有页，以避免这类问题的加载后触发脚本像刷卡。我的图片似乎没有高度。我认为这个问题是由触发我的脚本之前纳克重复不加载全造成的。

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

在咨询谢谢，我希望我已经解释了我的问题，尽可能地。

解决方案

进入如何使这项工作之前，大多数这些类型的jQuery插件并不很好地角，因为它们进行修改DOM中的工作，没有按角知道的。

话虽这么说，关键是推迟jQuery插件，直到角已经呈现的DOM后调用。

首先，把你的刷卡插件安装到一个指令：

  .directive（'刷卡'，函数（$超时）{
    返回{
        链接：功能（范围，元素，属性）{
            //选择1  - 对NG重复变更通知
            （范围。在$（'内容变更'，功能）{
                新的击打（元，{
                    方向：水平，
                    分页：'.swiper-分页，
                    paginationClickable：真正的）;
            }
            //选项2  - 使用$超时
            $超时（函数（）{
                新的击打（元，{
                    方向：水平，
                    分页：'.swiper-分页，
                    paginationClickable：真正的）;
            }）;        }
    };
}）
 

有关选项1，你需要修改isLoaded指令

  myApp.directive（'isLoaded'，函数（）{   返回{
     适用范围：假的，//不需要一个新的作用域
     限制：'A'，//属性类型
     链接：功能（范围，元素，参数）{        如果（范围。$最后一个）{
            。范围$排放（内容改为'）;
            的console.log（页面准备好了！'）;
        }
     }
   }
}）
 

最后，您的标记（注意，从isLoaded的变化是加载....这可能是你没有看到通知的原因）。

 ＆LT; D​​IV NG-的init =initGetRequestMain（）刷卡＆GT;   ＆LT; D​​IV NG重复=幻灯片中data.slides是装载＆GT;
       ＆LT; D​​IV CLASS =刷卡滑的风格={{slide.background}}
                   NG-点击=swipers（）＆GT;＆LT; / DIV＆GT;
   ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

正如前面提到的，大多数的jQuery插件是做旋转木马的功能没有很好地处理到DOM的变化（即新元素）。即使这两个选项，你可能会看到，如果你改变你的模型中的NG-重复首次呈现之后，意想不到的事情。但是，如果你的模型是静态的，这应该为你工作。如果你的模式的转变，那么你可能想寻找更多的角旋转木马指令。

I have a problem that I wasn't able to solve even looking to other posts on StackOverflow.

I'm making a web app using AngularJS, jQuery, HTML, CSS and Bootstrap, and I would like to pick some Image Links from my JSON that is located in an Apache2 Server and use them in order to render those images in my Main Page. I would also like to swipe them like in a carousel. To make that work, I'm trying to use iDangero.us Swiper.

When I pick my images with 3 separated divs I have no problems. I get my images and then I can normally swipe them as I want. I do it like shown below:

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>

I use Swiper to swipe from an Image to another, it seems to work as it should. It's a jQuery plugin, you can see some demos at 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;
       })
      }
  }]);

The problem is that when I try to use ng-repeat instead of 3 separated divs, I can't see them anymore and my Swiper script triggers before they are fully loaded. I have no errors in my console either in my JSON (validated with JSONLint). Below, I add 2 screenshots of my outuput in both situations.

Working with 3 separated divs:

Not working with ng-repeat:

Below, I paste some code where I try to make ng-repeat work keeping the same controller and the same Swiper script as before:

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')"}
],

In order to get my images loaded before triggering the script, I'm trying to use 2 custom directives.

isLoaded tells me when the last ng-repeat element is loaded and sets 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 waits for pageIsLoaded = true; and loads the script:

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

They do not seem to fix my problem, I can't also see console.log('page Is Ready!'); when making the first one.

I'm just having some troubles when I have to trigger a script like swiper after the page is loaded in order to avoid these kind of problems. My images seem to have no height. I think that the problem is caused by ng-repeat not loading for full before triggering my script.

What Am I doing wrong? Are there better solutions?

Thanks in Advice, I hope I've explained my problem as best as possible.

解决方案

Before getting into how to make this work, most of these types of jQuery plugins don't work well with angular since they make modifications to the DOM that angular doesn't know about.

That being said, the trick is deferring the invocation of the jQuery plugin until after Angular has rendered the DOM.

First, put your swiper plugin into a directive:

.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',
                    pagination: '.swiper-pagination',
                    paginationClickable: true);
            }
            //Option 2 - using $timeout
            $timeout(function(){
                new Swiper(element , {
                    direction: 'horizontal',
                    pagination: '.swiper-pagination',
                    paginationClickable: true);
            });

        }
    };
})

For Option 1, you need a modified isLoaded directive

myApp.directive('isLoaded', function (){

   return{
     scope:false, //don't need a new scope
     restrict: 'A', //Attribute type
     link: function (scope, elements, arguments){ 

        if (scope.$last) {
            scope.$emit('content-changed');
            console.log('page Is Ready!');
        }
     }   
   }
})

Finally, your markup (note the change from isLoaded to is-loaded....this is probably the reason you weren't seeing the notification).

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

As mentioned, most jQuery plugins that do carousel functionality don't handle changes to the DOM (i.e new elements) very well. Even with both options, you may see unexpected things if you change your model after the ng-repeat is first rendered. However, if your model is static, this should work for you. If your model changes, then you might want to search for a more "angular" carousel directive.

这篇关于jQuery的刷卡脚本后伍重复元素被加载运行 - AngularJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！