How to hide a div with timeout in Angularjs?

Question

I’m new at Angularjs and I’m getting beaten 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 1

You can do it like this:

Add the directive ngHide in his div.

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

In your controller you add the variable hideLoader initially with value false and puts the $timeout to exchange the value to true, what will cause the directive ngHide 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 one directive to manage this instead of using this method above.