I need to add a delay in displaying a page in my app. I am using angularjs framework. The reason why i need to do this is because, even though my DOM is fully rendered, the data from angularjs is still being read and not added to the DOM. I have tried adding timeout to the ui-view BUT it doesnt do the trick.
3
-
Doesn't whatever reads the data have some sort of complete callback?nnnnnn– nnnnnn2016-09-20 09:07:00 +00:00Commented Sep 20, 2016 at 9:07
-
For additional info, i am reading a json object from a pretty big json file. Whats happening is i have a directive that binds an element value to the json object. Even though the html element is already loaded e.g span, and the value inside the span is still being fetch from the json file which is causing a delay on displaying the value inside the span element.czartm– czartm2016-09-20 09:47:38 +00:00Commented Sep 20, 2016 at 9:47
-
The best approach would be to add a resolve to the router, so the view doesn't even load until after your JSON is loaded.EvilZebra– EvilZebra2016-09-29 18:32:40 +00:00Commented Sep 29, 2016 at 18:32
Add a comment
|
3 Answers
Try to use timeout function :
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
$scope.myHeader = "Hello World!";
$timeout(function () {
$scope.myHeader = "How are you today?";
}, 2000);
});
Comments
I didn't get why you want to delay page loading
What I understood from your problem is that your page is getting displayed in uncompiled form
try to use
ng-cloack directive
The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.
The directive can be applied to the <body> element, but the preferred usage is to apply multiple ngCloak directives to small portions of the page to permit progressive rendering of the browser view.
here is complete documentation
Comments
Use the resolve option to load your JSON before the view is loaded. Documentation.
For example:
resolve: {
return $http({method: 'GET', url: '/someUrl'})
.then (function (data) {
return doSomeStuffFirst(data);
});
}
