Question

我可以从控制器访问诸如$ routeParams之类的服务。

angular.module('myModule', []).

    controller('myCtrl', ['$routeParams',
                          '$scope', function($routeParams,
                                             $scope) {

        console.log($routeParams['my-route-param']);                       

    }])

但我如何从模板中做同样的事情。我尝试了以下代码无济于事。

<h1 ng-hide="$routeParams['my-route-param']">No route param!</h1>

我知道您可以随时将值保存到$ scope，但我正在寻找更清洁的解决方案。

Answer 1

您可以将routeParams分配给$ scope的属性：

controller('myCtrl', ['$routeParams',
                      '$scope', function($routeParams,
                                         $scope) {
 ...
 $scope.$routeParams = $routeParams
 ...
 }

然后这会起作用：

 <h1 ng-hide="$routeParams['my-route-param']">No route param!</h1>

原因是你要从模板访问的每个属性都应该在当前范围内定义，当然这不是控制器构造函数的参数。

注意：如果使用controller as语法，您将对控制器执行相同操作，而不是范围：

controller('myCtrl', ['$routeParams',
                      '$scope', function($routeParams,
                                         $scope) {
 ...
 this.$routeParams = $routeParams
 ...
 }

和标记：

 <div ng-controller="myCtrl as ctrl">

     <h1 ng-hide="ctrl.$routeParams['my-route-param']">No route param!</h1>

Answer 2

它有点晚了，但我已经将$routeParams复制到我的$scope中，只能在我的视图中使用它们，所以我创建了一个指令来执行此操作。 / p>

我们假设你有这个路由配置：

...
angular.module( 'myApp' ).config( [ '$routeProvider', function( $routeProvider ) {
    $routeProvider.when( '/view1/:param1/:param2', {
        templateUrl: 'view1/view1.html',
        controller: 'View1Ctrl'
    });  
}])
...

在您的view1.html：

中

<h1 isteven-rr>$routeParams says: [[param1]] [[param2]]</h1>

如果您在网址栏中有此内容：http://localhost/#/view1/Hello/World!

然后你会看到：

$ routeParams说：Hello World！

Fork＆amp;了解更多：https://github.com/isteven/angular-route-rage

希望它可以帮助缩短开发时间！干杯！

AngularJS - 如何在模板中使用服务

2 个答案:

$ routeParams说：Hello World！