角度路线 - 负载时调用功能

I am using $routeProvider to route all of my apps pages to the correlating controllers, but when two routes use the same controllers (i.e. /blog & /blog:id) how can I initialize a separate function depending on the current route.

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

So if the route is /blog I want to initialize $scope.loadPosts() on route load. If the route is /blog:id I want to initialize $scope.loadPost($id) on route load.

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

2 个解决方案

#1

You could do a few things here, but my suggestion would be to pass the initialization function through the resolve of the route. You could do something like this:

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

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', {
          controller: 'BlogController',
          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>

Some other options would be:

其他一些选择是:

Resolve some sort of indicator that you could do a switch on in an initialization function inside the controller

解决某些指示器,您可以在控制器内部的初始化函数中执行此操作

If you're loading the blog route, resolve an undefined object, if you're loading the blog:id route, resolve the actual item you would load for that route

如果您正在加载博客路线,请解析未定义的对象,如果您正在加载博客:id路由,请解析您为该路由加载的实际项目

Hopefully this code gets you started on the right track with whatever you decide.

希望这段代码可以帮助您在任何决定的情况下开始正确的轨道。

edit Here's a link to a plunker, the code snippet appears to be acting oddly intermittently

编辑这是一个链接到一个plunker,代码片段似乎间歇性地表现奇怪

#2

The Simple way to do this is, using ng-init in corresponding template.

简单的方法是在相应的模板中使用ng-init。

angular.module('demo', ['ngRoute'])
 .config(['$routeProvider',
   function($routeProvider) {
    $routeProvider
    .when('/linkOne', {
      controller: 'LinkController',
      template: '<h1 ng-init="functionOne()">Hello world</h1>'
    })
    .when('/linkTwo', {
      controller: 'LinkController',
      template: '<h1 ng-init="functionTwo()">Hello *</h1>'
    });
 }])
 .controller('LinkController', ['$scope', function($scope) {
  $scope.functionOne = function(){
    console.log("Hello");
  }
  $scope.functionTwo = function(){
    console.log("Hello world");
  }
 }]);

HTML code:

 <!DOCTYPE html>
   <html ng-app="demo">
    <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="#linkOne">Link One</a>
      <a href="#linkTwo">Link Two</a>

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

#1