How to hide a div with timeout in AngularJS?

3

I'm new to AngularJS and I'm picking up simple solving 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?

    
asked by anonymous 27.01.2015 / 21:44

1 answer

3

You can do this:

Add the ngHide directive to your div .

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

On your controller you add the variable hideLoader initially with value false and put $timeout to change the value to true , which will cause the ngHide directive to hide the element

$scope.hideLoader = false;

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

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

    
27.01.2015 / 22:36