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

我可以像这样从控制器访问$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，但我正在寻找更干净的解决方案。

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

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

这样就行了：

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

和标记：

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

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

没有路线参数！

有点晚了，但我已经受够了将

$routeParams

复制到

$scope

中，只能在我的视图中使用它们，所以我创建了一个这样做的指令

假设您有以下路由配置：

...
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> 

$routeParams说：[[param1][[param2]]

如果您的URL栏中有此项：

http://localhost/#/view1/Hello/World!

然后你会看到：

$routeParams说：你好，世界！
Fork&了解更多信息：

希望它能帮助缩短开发时间！干杯
 如果你想做很多事情，你可以把它放在rootscope的route参数上
<h1 isteven-rr>$routeParams says: [[param1]] [[param2]]</h1>