如何在Angularjs中使用超時函數切換div層？

Angular Technorati的成員。我帶着一個令人困惑的問題來找你，雖然很簡單。我需要在大約11秒後切換出一個div層並顯示另一個div層。這是如何使用angularjs超時服務完成的，最好在控制器中完成？如何在Angularjs中使用超時函數切換div層？

好的，如果我將$ showou服務與一個顯示和隱藏事件組合在一起，該怎麼辦？

` <body ng-app="myApp"> 
<div ng-controller="showHideController" ng-init="getPanel_1()"> 




    <div ng-controller="showHideController" ng-show="divA"style=''> 


</div> 



<div ng-controller="showHideController" ng-show="divB" style=''> 
</div> 
<script> 
angular.module('myApp',[]).controller('showHideController',function($scope, $timeout) { 


    $scope.getPanel_1 = function(){ 
    $scope.divA = true; 
    $scope.divB = false; 
    $scope.divC = false; 
    } 
    $timeout(function(){ 
    $scope.getPanel_1 = function(){ 
    $scope.divA = false; 
    $scope.divB = true; 
    $scope.divC = false; 
    } 
    }, 5000); 
}); 

</script>`

在此先感謝， Batoe。「成功之路充滿障礙......而且成功！」未知的樂觀主義者。

來源

2016-08-11 Tony Starke

通過「轉出」你的意思是改變中的z-index'內聯樣式？如果您有預定義的樣式，可以使用'ngStyle'作爲https://docs.angularjs.org/api/ng/directive/ngStyle或'ngClass' https://docs.angularjs.org/api/ng/directive/ ngClass –

使用ng-show指令並根據您的設置顯示/隱藏div –

不是很angularjs方式，但你可以：

<div ng-controller="myCtrl"> 
    <div ng-include src="currentDiv"> 
    </div> 
</div> 

<script type="text/ng-template" id="div1.html"> 
    <div ng-controller="panel_1"> 
    </div> 
</script> 

<script type="text/ng-template" id="div2.html"> 
    <div ng-controller="panel_2"> 
    </div> 
</script>

和控制器：

app.controller('myCtrl', function($scope, $timeout) { 
    $scope.currentDiv= "div1.html" ; 

    $timeout(function() { 
     $scope.currentDiv= "div2.html" ; 
    }, 15000); 
});

來源

2016-08-11 14:25:58 Luxor001

聰明，但它沒有切換div。我認爲，如果我可以將顯示/隱藏事件與$ timeout服務結合起來，那麼可能是我尋找的答案。 –

所以你想在div開關上做某種動畫？ – Luxor001

是的，但我可以使用angular的Animate服務或jquery來實現。我只需要在大約十秒後顯示並隱藏初始div層。這是我的應用中唯一需要這個功能的時間段。 –

如何在Angularjs中使用超時函數切換div層？

回答

相關問題