在 Angular 完成渲染后运行 JQuery 代码
Run JQuery code after Angular is done rendering
我对Angular JS很陌生,因此这个问题可能真的很愚蠢。在SO的几个问题中也讨论了它,但我无法从中做出任何贡献。
我试图做一件看似非常简单的事情,但一直非常困难。我正在尝试在 HTML 由 Angular 渲染后运行 JQuery 代码。
我已经尝试了 10 多个小时,但没有任何效果,请帮忙!
这是 JQuery 代码:-
$(".scrollable-quotes").slick({
infinite: true,
speed: 500,
fade: true,
cssEase: 'linear'
});
它基本上运行一个包含在我的索引.html中的滑块库。我的索引.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>
这是我的控制器.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。 我不熟悉光滑,但你有没有尝试过像这样执行你的代码:$(".scrollable-quotes").slick...
基本上就像您在第一个代码块中所说的那样。如果你在包含的脚本中使用了完整的jQuery,那么应该为完整的jQuery定义$。
这需要在指令中完成,以便您确保在运行代码时元素存在。当 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
nd Wrap 初始化代码,以便将其推送到摘要周期的末尾
相关文章:
- 对动态创建的元素运行jQuery.ech()
- 如何在加载角度函数后运行jQuery代码
- 在AJAX jQuery加载()之后运行jQuery代码
- 如何仅在设备基于 iOS 时运行 jQuery 代码
- 使用 .on 函数运行 jQuery 声明函数
- html代码没有运行jquery问题
- 仅在尚未运行jQuery UI的情况下运行动画
- 在运行jquery之前从5开始倒计时
- 在不重新运行jquery验证的情况下检查表单是否有效
- 在Angular App中运行jQuery函数
- 一旦设置了PHP查询字符串,如何运行jQuery脚本
- 如何在Ember中更改模板时运行JQuery代码
- 如果URL包含字符串don't运行jQuery函数
- 在php之前运行jQuery脚本
- 无法动态地将 jquery 添加到头部并运行 jquery 代码
- 在 HTML 中运行 jquery 脚本
- 如何在控制器外部和视图内在 AngularJs 中运行 jQuery
- 在具有相同类的每个表上运行 jquery
- 在 Angular 完成渲染后运行 JQuery 代码
- 如何选择当前 DIV ID 以使用该 ID 运行 Jquery