在 Angular 完成渲染后运行 JQuery 代码答案

【问题标题】：Run JQuery code after Angular is done rendering在 Angular 完成渲染后运行 JQuery 代码
【发布时间】：2016-03-06 23:50:05
【问题描述】：

我对 Angular JS 很陌生，因此这个问题可能真的很愚蠢。它也在几个关于 SO 的问题中进行了讨论，但我无法从中得出任何结论。

我正在尝试做一件看似非常简单的事情，但它非常困难。我试图在 Angular 呈现 HTML 后运行 JQuery 代码。

我已经尝试了 10 多个小时，但没有任何效果，请帮助！

这是 JQuery 代码：-

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

它基本上运行一个包含在我的 index.html 中的滑块库。我的 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>

这是我的 controllers.js

'use strict';
angular.module('EBSheadlessDrupal.controllers', [])


// Controller that pulls events list from our services.
.controller('EventIndexCtrl', function($scope, EventService) {

    EventService.setups().then(function(setups){
        $scope.setups = setups.data;
        //console.log($scope.setups);
    });
})


// Controller that pulls events list from our services, and binds it to an individual view for display on the detail page.
.controller('EventDetailCtrl', function($scope, $stateParams, EventService) {

    var id = $stateParams.id;

    EventService.setups().then(function(setups){
        EventService.setup(setups.data,id, function(setup){
            $scope.setup = setup;
            //console.log($scope.setup);
            });
        });
    })

    // Controller that pulls events list from our services.
.controller('WhatIndexCtrl', function($scope, WhatService) {

    WhatService.whats().then(function(whats){
        $scope.whats = whats.data;
        //console.log($scope.whats);
    });
})


// Controller that pulls events list from our services, and binds it to an individual view for display on the detail page.
.controller('WhatDetailCtrl', function($scope, $stateParams, WhatService) {

    var id = $stateParams.id;

    WhatService.whats().then(function(whats){

        angular.element(document).ready(function () {
            document.getElementById('body').addClass("asdasdasd");

        });

        WhatService.what(whats.data,id, function(what){
            $scope.what = what;
            console.log($scope.what);
            });
        });
    })

// Controller that pulls single node JSON from our services, and binds to about.
    .controller('UserCtrl', function($scope, UserService) {

    UserService.user().then(function(user){
        $scope.user = user.data;
        //console.log($scope.user);
    });
})

// Controller that pulls single node JSON from our services, and binds to about.
    .controller('NodeCtrl', function($scope, NodeService) {

    NodeService.node().then(function(node){
        $scope.node = node.data;
        //console.log($scope.node);
    }, function(err) {
        alert(err.status + ' ' + err.statusText);
    });
})

//user login
.controller('AppCtrl', function() {
});

WhatService.whats().then(function(whats) 需要它。这是我在函数中尝试过的，但没有奏效：-

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

【问题讨论】：

你知道 slick 是如何将自己导出到 jquery 上的吗？
你想在哪里运行你的 jquery 代码？比如在哪个文件里？因为如果 angular 还没有初始化 jquery 就不会找到它
您找到解决方案了吗？我需要相同的功能，但仍然无法解决此问题。

标签： javascript jquery angularjs json ionic-framework

【解决方案1】：

Angular.element 正在使用 jqlite，这是一个轻量级的 jQuery。我对 slick 不熟悉，但您是否尝试过像这样执行代码：$(".scrollable-quotes").slick...

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

【讨论】：

我确实尝试过$(".scrollable-quotes").slick，但没有成功。可能是我在错误的地方初始化它？我只是把它放在 index.html 或模板中
如果 jquery 在 angular 之前加载到页面中，则 angular.element 继承自完整 jquery，因此它具有完整 jquery 的完整功能，并且错误更少，然后尝试将 $ 与 angular 一起使用
我的立场是正确的。 @Binvention 关于 Angular 如何包含 jQuery 是正确的。您确定您的代码能按预期进行流畅调用吗？如果是，那么您还需要检查当时页面上是否还有带有“可滚动引号”的元素。 $(".scrollable-quotes").length 的值是多少？有没有办法创建一个简化版本的代码，你必须排除其他事情？

【解决方案2】：

这需要在指令中完成，以便确保在代码运行时元素存在。当 jQuery.js 在 angular.js 之前的页面中加载时，链接函数中的 element 是一个 jQuery 对象

模板中的某处：

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

如果您需要时间让数据首先呈现在视图中，您可以注入 $timeout 并在其中包装初始化代码，以便将其推送到摘要周期的末尾

【讨论】：