angularjs – Angular Route – 加载时调用函数

发布时间：2020-12-17 10:20:58 所属栏目：安全来源：网络整理

导读：我使用$routeProvider将我的所有应用程序页面路由到相关控制器,但是当两个路由使用相同的控制器(即/ blog / blog：id)时,如何根据当前路由初始化单独的函数. 所以如果路由是/ blog我想在路由加载时初始化$scope.loadPosts(). 如果路由是/ blog：id我想在路由

我使用$routeProvider将我的所有应用程序页面路由到相关控制器,但是当两个路由使用相同的控制器(即/ blog& / blog：id)时,如何根据当前路由初始化单独的函数.

所以如果路由是/ blog我想在路由加载时初始化$scope.loadPosts().
如果路由是/ blog：id我想在路由加载时初始化$scope.loadPost($id).

你可以在这里做一些事情,但我的建议是通过路由解析来传递初始化函数.你可以这样做：

angular.module('test',['ngRoute'])
  .config(['$routeProvider',function($routeProvider) {
      $routeProvider
        .when('/blog',{
          controller: 'BlogController',template: '<h1>Blog</h1>',resolve: {
            init: function() {
              return function() {
                console.log('Loading Blog');
              }
            }
          }
        })
        .when('/blog/:id',template: '<h1>Blog ID</h1>',resolve: {
            init: function() {
              return function($route) {
                console.log('Loading Blog Article ' + $route.current.params.id);
              }
            }
          }
        });
    }
  ])
  .controller('BlogController',['$scope','$route','init',function($scope,$route,init) {
      init($route);
    }
  ]);

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

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
  <script src="https://code.angularjs.org/1.4.6/angular-route.js"></script>

</head>

<body>
  <a href="#/blog">Go to Blog</a>
  <a href="#/blog/2">Go to Article 2</a>

  <div ng-view></div>
</body>

</html>

其他一些选择是：

>解决某些指示器,您可以在控制器内部的初始化函数中进行切换
>如果您正在加载博客路线,请解析未定义的对象,如果您正在加载blog：id route,请解析您为该路线加载的实际项目

希望这段代码能让您在任何决定的情况下开始正确的轨道.

编辑这里是一个link to a plunker,代码片段似乎间歇性地表现得很奇怪

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!