Javascript 渲染完成后运行JQuery代码_Javascript_Jquery_Angularjs_Json_Ionic Framework

Javascript 渲染完成后运行JQuery代码

javascript jquery angularjs json ionic-framework

Javascript 渲染完成后运行JQuery代码,javascript,jquery,angularjs,json,ionic-framework,Javascript,Jquery,Angularjs,Json,Ionic Framework,我是个新手，所以这个问题可能真的很愚蠢。关于这一点，也有几个问题进行了讨论，但我对此一无所知我试图做一件看似很简单的事情，但却很困难。我试图在Angular呈现HTML之后运行JQuery代码我已经试了10个多小时了，但是没有效果，请帮忙这是JQuery代码：- 它基本上运行一个包含在my index.html中的滑块库。My index.html如下所示：- <html> <head> <meta charset="utf-8">

我是个新手，所以这个问题可能真的很愚蠢。关于这一点，也有几个问题进行了讨论，但我对此一无所知

我试图做一件看似很简单的事情，但却很困难。我试图在Angular呈现HTML之后运行JQuery代码

我已经试了10个多小时了，但是没有效果，请帮忙

这是JQuery代码：- 它基本上运行一个包含在my index.html中的滑块库。My index.html如下所示：-

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>My Ang App</title>

    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="scripts/slick/slick.min.js"></script>

  </head>

  <body ng-app="EBSheadlessDrupal" onload="StartMove()">
    <ion-nav-view></ion-nav-view>

    <!-- build:js scripts/vendor.js -->
    <!-- <script src="vendor/someContribJs.js"></script> -->
    <!-- bower:js -->
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-animate/angular-animate.js"></script>
    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
    <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
    <script src="bower_components/collide/collide.js"></script>
    <script src="bower_components/ionic/release/js/ionic.js"></script>
    <script src="bower_components/ionic/release/js/ionic-angular.js"></script>
    <!-- endbower -->
    <!-- endbuild -->

    <!-- build:js scripts/scripts.js -->
      <script src="scripts/app.js"></script>
      <script src="scripts/services.js"></script>
      <script src="scripts/controllers.js"></script>
    <!-- endbuild -->

</body>
</html>

在

WhatService.whats（）.then（function（whats）

中需要它。这是我在函数中尝试的，但不起作用：-

angular.element(".scrollable-quotes").slick({
              infinite: true,
              speed: 500,
              fade: true,
              cssEase: 'linear'
});

element正在使用jqlite，这是jQuery的一个亮点。我不熟悉slick，但您是否尝试过这样执行代码：$（“.scrollable quotes”）。slick

基本上就像您在第一个代码块中所述。如果您在包含的脚本中使用了完整的jQuery，那么应该为完整的jQuery定义$。

这需要在一个指令中完成，这样您就可以确保在代码运行时元素存在。当jQuery.js加载到angular.js之前的页面中时，链接f中的

元素

函数是一个jQuery对象

模板中的某处：

<div slick >Slick content</div>

如果您需要时间让数据首先呈现在视图中，您可以在其中插入

$timeout

并包装初始化代码，以便将其推到摘要周期的末尾

我尝试了

$（“.scrollable quotes”）.slick

但它不起作用。可能是我在错误的位置初始化了它吗？我只是把它放在index.html或模板中。如果jquery在angularI之前加载到页面中，那么angular.element继承了完整jquery，因此它具有完整jquery的全部功能，bug更少，然后尝试使用$with angularI stand correct。@Binvention关于angular如何包含jQuery是正确的。你确定你的代码能够像你期望的那样到达光滑的调用吗？如果是，那么你还需要检查页面上是否也有一个带有“可滚动引号”的元素。$（“.scrollable quotes”）的值是多少.length？有没有办法创建简化版本的代码？你必须排除其他因素？你知道slick是如何将自己导出到jquery上的吗？你想在哪里运行jquery代码？比如它在哪个文件中？因为如果angular没有初始化它，jquery就找不到它是的，你找到解决方案了吗？我需要相同的函数但是我仍然无法解决这个问题。

angular.element(".scrollable-quotes").slick({
              infinite: true,
              speed: 500,
              fade: true,
              cssEase: 'linear'
});

<div slick >Slick content</div>

angular.module('myMainApp', function(){
   return {
      restrict:'A',
      link:function(scope, element, attrs){
         element.slick({
           infinite: true,
           speed: 500,
           fade: true,
           cssEase: 'linear'
        });
      }
   }    
});