AngularJS - 在一定的時間限制之後在頁面之間切換

我已經在StackOverflow中搜索過了，但是我無法找到適合我要找的東西的解決方案，所以我會再次提問。我試圖創建一個特定的應用程序，以一些很酷的圖片等的「初始頁面」開始，但是經過一段時間 - 例如4秒鐘 - 它將轉換到下一頁。我怎樣才能做到這一點？我讀了一些關於timeout（）函數的東西，但不能真正理解它。AngularJS - 在一定的時間限制之後在頁面之間切換

我在考慮某種定時功能，當時間到期時，它會激活ui-sref或href進入下一頁。順便說一句，我是一個AngularJS新手，所以不要評判:) 如果你想我發佈一些代碼，我可以這樣做，但我真的不知道從哪裏開始...只是有這兩個頁面的一些模板東西。

非常感謝。

來源

2016-06-29 Freedom

如果您在啓動頁面的控制器中注入$ state和$ timeout，您可以擁有一個函數。

function activate(){ 
    $timeout(function(){ 
    $state.go('page2') 
    },4000) 
} 
activate();

你也不能有一個重定向，而是讓你不需要重定向，但我不知道你的應用程序如何設計肚裏4秒鐘後離開您的主網頁上的彈出。

這是假設你有一些路線設置也

來源

2016-06-29 21:11:37 Jake

是我已經設置了路線和控制器......我想你的代碼集成到我的代碼，但它似乎沒有做什麼？有沒有另一種方法來做到這一點？非常感謝您幫助btw – Freedom

您可以發佈控制器的代碼片段 – Jake

我想對某種計時功能，當時間到期時，它會激活UI-SREF或HREF去到下一個頁面。

這正是$timeout()是。當你傳遞一個函數和一個超時（毫秒）時，它會在指定的毫秒後運行該函數。

所以，

$timeout(function() { 
    $state.go('page2'); 
}, 4000);

將調用4秒（4000ms）在超時後功能（轉到第2頁）。 $ timeout（）之後的代碼行將立即執行（即不等待超時）。

您可以將此代碼放在啓動頁面控制器的開始位置。確保你注入了$ state和$ timeout。

來源

2016-06-29 21:21:58

以下是一個簡單的準系統應用程序，它可以完成您想要的任務。請記住，我使用routeProvider模塊而不是stateProvider，但是同樣的原則適用。

我已經爲你製作了live Plunker演示。有關如何使用$ timeout的更多信息，請單擊here。

相關部分是：

app.controller('MainCtrl', function($scope, $timeout, $location) { 
    // Main controller 

    $scope.title = "First Page"; 

    var goToSecondPage = function() { 
    $location.path('/second'); 
    }; 

    $timeout(goToSecondPage, 5000); 
});

app.js

var app = angular.module('plunker', ['ngRoute']); 

app.controller('MainCtrl', function($scope, $timeout, $location) { 
    // Main controller 

    $scope.title = "First Page"; 

    var goToSecondPage = function() { 
    $location.path('/second'); 
    }; 

    $timeout(goToSecondPage, 5000); 
}); 

app.controller('SecondCtrl', function($scope, $timeout, $location) { 
    // Second controller 

    $scope.title = "Second Page"; 

    var goToMainPage = function() { 
    $location.path('/'); 
    }; 

    $timeout(goToMainPage, 5000); 
}); 

app.config(['$routeProvider', function($routeProvider) { 
    $routeProvider 
     .when('/', { 
      templateUrl: "main.tpl.html", 
      controller: 'MainCtrl' 
     }) 
     .when('/second', { 
      templateUrl: "second.tpl.html", 
      controller: 'SecondCtrl' 
     }) 
     .otherwise({ redirectTo: '/' }); 
}]);

的index.html

<!DOCTYPE html> 
<html ng-app="plunker"> 

    <head> 
    <meta charset="utf-8" /> 
    <title>AngularJS Plunker</title> 
    <script>document.write('<base href="' + document.location + '" />');</script> 
    <link rel="stylesheet" href="style.css" /> 
    <script data-require="[email protected]" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular-route.js"></script> 
    <script src="app.js"></script> 
    </head> 

    <body> 
    <h1>My Angular App</h1> 
    <ng-view></ng-view> 
    </body> 

</html>

main.tpl。HTML

<h2>{{title}}</h2> 

<p>You will be redirected to the second page in 5 seconds...</p>

second.tpl.html

<h2>{{title}}</h2> 

<p>This is the second page.</p> 

<p>You will be redirected to the main page in 5 seconds...</p>

來源

2016-06-29 21:43:15

AngularJS - 在一定的時間限制之後在頁面之間切換

回答

相關問題