How does one write an angularjs directive that adds a delay to rendering that element?
<div my-directive>
Hello - show after 1 second.
</div>
angular.module('myapp').directive('myDirective', function () {
return {
restrict: 'A',
link: function (scope, element, attrs) {
}
}
})
Well, I don't think it possible to access rendering process directly, though you can display or hide element manually
angular.module('myapp').directive('myDirective', function ($timeout) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
element.hide(); // hide on load
$timeout(function() {
element.show(); // show after delay
}, 1000)
}
}
})
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script >
angular.module('myapp',[]);
angular.module('myapp').directive('myDirective', function () {
return {
restrict: 'A',
link: function (scope, element, attrs) {
element.css("display", "none");
setTimeout(function(){ element.css("display", "block"); }, 1000);
}
}
})
</script>
</head>
<body ng-app="myapp">
Start
<div my-directive>
Hello - show after 1 second.
</div>
<script src="" async defer></script>
</body>
</html>You can put a delay in rendering of the element using a scope variable and timeout with ng-if in a child element of the directive.
Hope this helps.
var app = angular.module("myapp", []);
app.directive('myDirective', function( $timeout) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
$timeout(function() {
scope.show = true;
}, 1000);
}
}
});
app.controller("myCtrl", function($scope) {
$scope.show = false;
});<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myapp" ng-controller="myCtrl">
<div my-directive>
<div ng-if="show">
Hello - show after 1 second.
</div>
</div>
</div>