How to hide a timeout div in AngularJS?

Question:

I'm new to AngularJS and I'm getting beat up to solve simple problems.

I have my controller

mainAppControllers.controller('NomeCtrl', ['myservice','$rootScope','$scope', '$routeParams', '$location','$timeout',
    function(myservice,$rootScope , $scope, $routeParams, $location,$timeout){

and my html

<div id="loaderViwew">
        <a id="btnInfo" ng-click="btnInfo()"><img src="img/btninfo.png" /></a>  
        <a id="close" ng-click="btnFechar()"><img src="img/closeMenu.png" /> </a> 
        <img id="alertScanIcon" src="img/iconeScanAlert.png" />
</div> 

How do I hide the div with a timeout?

Answer:

You can do it like this:

Add the ngHide directive to your div .

<div id="loaderViwew" ng-hide="hideLoader">
        .....
</div> 

In your controller you add the hideLoader variable initially with a false value and set the $timeout to change the value to true , which will make the ngHide directive hide the element.

$scope.hideLoader = false;

$timeout(function(){
    $scope.hideLoader = true;
}, 3000);

If you intend to reuse this view in other areas I suggest you create a directive to manage it instead of using this method above.

Scroll to Top