gpt4 book ai didi

javascript - Angular 完成渲染后运行 JQuery 代码

转载 作者:行者123 更新时间:2023-11-30 16:13:44 25 4
gpt4 key购买 nike

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

我正在尝试做一件看似很简单的事情,但做起来却非常困难。我正在尝试在 Angular 呈现 HTML 后运行 JQuery 代码。

我已经尝试了 10 多个小时,但没有任何效果,请帮忙!

这是 JQuery 代码:-

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

它主要运行一个包含在我的 index.html 中的 slider 库。我的 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'
});

最佳答案

Angular.element 使用的是 jqlite,它是 jQuery 的轻量级版本。我对 slick 不熟悉,但你有没有试过像这样执行你的代码:$(".scrollable-quotes").slick...

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

关于javascript - Angular 完成渲染后运行 JQuery 代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35834080/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com