Run JQuery code after Angular is done rendering
Question
I am very new to Angular JS hence this question may be really stupid. It has also been discussed in couple of questions on SO but I couldn't make anything out of it.
I am trying to do a seemingly very simple thing but it has been very difficult. I am trying to run a JQuery code after the HTML is rendered by Angular.
I have been trying this for over 10 hours, but nothing works, please help!
This is the JQuery code:-
$(".scrollable-quotes").slick({
infinite: true,
speed: 500,
fade: true,
cssEase: 'linear'
});
It basically runs a slider library that is included in my index.html. My index.html is as follows:-
<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>
Here's my 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() {
});
It's needed in WhatService.whats().then(function(whats) . This is what I tried in the function, but it didn't work:-
angular.element(".scrollable-quotes").slick({
infinite: true,
speed: 500,
fade: true,
cssEase: 'linear'
});
2 answers
solution1
1 2016-03-07 00:08:04
Angular.element is using jqlite which is a light versus of jQuery. I'm not familiar with slick but have you tried executing your code like this: $(".scrollable-quotes").slick...
Basically like you have it stated in the first code block. If you have the full jQuery used in your included scripts, so $ should be defined for the full jQuery.
solution2
1 2016-03-07 01:24:55
This needs to be done in a directive so you are assured the element exists when code is run. When jQuery.js is loaded in page before angular.js the element in link function is a jQuery object
Somewhere in template:
<div slick >Slick content</div>
Directive
angular.module('myMainApp', function(){
return {
restrict:'A',
link:function(scope, element, attrs){
element.slick({
infinite: true,
speed: 500,
fade: true,
cssEase: 'linear'
});
}
}
});
if you need time for data to render in view first you can inject $timeout nd wrap initialization code in it so it gets pushed to end of digest cycle
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.