Question

我已经在StackOverflow周围进行了搜索，但是我无法找到适合我正在寻找的解决方案，所以我会再次提出这个问题。我试图创建一个以＆＃34;启动页面开头的特定应用程序＆＃34;有一些很酷的图片等，但经过一段时间 - 比如4秒 - 它将转换到下一页。我怎样才能做到这一点？我阅读了一些关于timeout（）函数的内容，但却无法理解它。

我正在考虑某种计时功能，当时间到期时，它会激活ui-sref或href以转到下一页。顺便说一下，我有点像AngularJS的新手，所以请不要判断:) 如果你想让我发布一些代码，我可以这样做，但我真的不知道从哪里开始......只需要为两个页面都有一些模板。

非常感谢。

Answer 1

如果在启动页面上将$ state和$ timeout注入控制器，则可以使用函数。

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

您也可能没有重定向，而是主页上的弹出窗口在4秒后消失，因此您不需要重定向但我不知道您的应用程序是如何设计的。

这假设你也设置了一些路线

Answer 2

我正在考虑某种计时功能，当时间到期时，它会激活ui-sref或href以转到下一页。

这正是$timeout()的内容。当你传递一个函数和一个超时（以毫秒为单位）时，它会在经过指定的毫秒后运行该函数。

所以，

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

将在超时4秒（4000毫秒）后调用该函数（转到第2页）。 $ timeout（）之后的代码行将立即执行（即不等待超时）。

您可以将此代码放在启动页面控制器的开头。确保注入$ state和$ timeout。

Answer 3

以下是一个简单的准系统Angular应用程序，可以执行您想要的操作。请记住，我使用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="angular.js@1.4.x" 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>

AngularJS-在一定时限后切换页面

3 个答案: