Javascript Angular:将参数从 $routeProvider 传递给控制器

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/27533386/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 00:17:00  来源:igfitidea点击:

Angular: Passing params from $routeProvider to controller

javascriptangularjs

提问by K. D.

I have multiple routes that invoke the same Controller and I would like to pass different variables to it.

我有多个调用同一个控制器的路由,我想将不同的变量传递给它。

// Example
$routeProvider.
  when('/a', {
    templateUrl: 'test.html',
    controller: 'MyController' // should get passed 'exampleA'
  }).
  when('/b', {
    templateUrl: 'test.html',
    controller: 'MyController' // should get passed 'exampleB'
});

I know that I could use the "resolve" object:

我知道我可以使用“解决”对象:

$routeProvider.
  when('/a', {
    templateUrl: 'test.html',
    controller: 'MyController',
    resolve: {test: function() { return true; }}
});

To pass a value as a dependency:

将值作为依赖项传递:

app.controller('MyController', ['$scope', 'test', function ($scope, test) {
  console.log(test); // true
}

My problem with that approach is that my app crashes if the resolve object is missing on other routes and I would like to pass optional params.

我对这种方法的问题是,如果其他路由上缺少解析对象,并且我想传递可选参数,我的应用程序就会崩溃。

Is there any way to pass specific params to the Controller (from the route provider)?

有没有办法将特定参数传递给控制器​​(来自路由提供者)?



Thank you

谢谢

回答by Aidin

Routing:

路由:

$routeProvider.
  when('/a', {
    templateUrl: 'test.html',
    controller: 'MyController',
    paramExample: 'exampleA'
  }).
  when('/b', {
    templateUrl: 'test.html',
    controller: 'MyController',
    paramExample: 'exampleB'
});

Access: inject $route in your controller then use this

访问:在您的控制器中注入 $route 然后使用它

 app.controller('MyController', ['$scope', '$route', function ($scope, $route) {
      var paramValue = $route.current.$$route.paramExample;
      console.log(paramValue); 
 }

回答by Wayne Ellery

You can use resolve and $route.currrent.params.testto pass the parameter like this:

您可以使用 resolve 并$route.currrent.params.test像这样传递参数:

$routeProvider
  .when('/a', {
    templateUrl: 'view.html',
    controller: 'MainCtrl',
    resolve: {
        test: function ($route) { $route.current.params.test = true; }
    }
  })
  .when('/b', {
    templateUrl: 'view.html',
    controller: 'MainCtrl',
    resolve: {
        test: function ($route) { $route.current.params.test = false; }
    }
  })

Then in your controller you can access it from the $routeParams:

然后在您的控制器中,您可以从 $routeParams 访问它:

app.controller('MainCtrl', function($scope, $routeParams) {
  $scope.test = $routeParams.test;
})

http://plnkr.co/edit/ct1ZUI9DNqSZ7S9OZJdO?p=preview

http://plnkr.co/edit/ct1ZUI9DNqSZ7S9OZJdO?p=preview

回答by wvdz

The most natural way to do this is doing what you would normally do when you want to load a page with parameters: use query parameters: http://yoururl.com?param1=value&param2=value

最自然的方法是执行您想要加载带有参数的页面时通常会执行的操作:使用查询参数: http://yoururl.com?param1=value&param2=value

ngRoute comes with the service $routeParams which you can inject in your controller. Now you can simply retrieve the values like this $routeParams.param1.

ngRoute 附带服务 $routeParams,您可以将其注入控制器。现在您可以简单地检索这样的值$routeParams.param1

Another way to do this is to retrieve the path with $location.pathand set the variable there.

另一种方法是检索路径$location.path并在那里设置变量。

回答by Amay Kulkarni

using $routeParams

使用 $routeParams

in Main js file

在主js文件中

routeApp.config(function($routeProvider) {
$routeProvider
    .when('/home', {
        templateUrl: '../sites/./home.html',
        controller: 'StudentController'
    })
    .when('/viewStudents/:param1/:param2', {
        templateUrl: '../sites/./viewStudents.html',
        controller: 'StudentController'
    })
    .otherwise({
        redirectTo: '/'
    });
 });

 routeApp.controller('StudentController',['$filter','$routeParams', '$location',function($filter,$routeParams,$location){
   var StudentCtrl = this;  
   StudentCtrl.param1 = $routeParams.param1;
   StudentCtrl.param2 = $routeParams.param2;
 }]);

calling from Home.html

从 Home.html 调用

 <div class="container">
   <h2> Welcome </h2>
   <a href="#/viewStudents/myname/somevalue2">Students</a>
</div>