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

I can access a service such as $routeParams from the controller like so.

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

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

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

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

    }])

But how would I do the same from a template. I tried the following code to no avail.

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

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

I know you could always save the value to $scope, but I am looking for a cleaner solution.

我知道你总是可以将价值保存到$ scope,但我正在寻找一个更清洁的解决方案。

2 个解决方案

#1

You can assign routeParams to a property of $scope:

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

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

and then this would work:

然后这会工作:

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

Reason for that is every property you are accessing from template should be defined in current scope, which of course is not the case for parameter of controller constructor.

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

NB: in case of controller as syntax used you would do the same with controller, not scope:

注意:如果使用控制器作为语法,您将对控制器执行相同操作,而不是范围:

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

and markup:

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

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

#2

It's a bit late, but I had enough of copying $routeParams into my $scope only to be able to use them in my views, so I created a directive to do so.

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

Let's say you have this routing config:

假设你有这个路由配置:

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

And in your view1.html:

在你的view1.html:

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

If you have this in your URL bar: http://localhost/#/view1/Hello/World!

如果你在URL栏中有这个:http:// localhost /#/ view1 / Hello / World!

Then you'll see:

然后你会看到:

$routeParams says: Hello World!

Fork & learn more: https://github.com/isteven/angular-route-rage

分叉并了解更多信息:https://github.com/isteven/angular-route-rage

Hope it can help shorten development time! Cheers!

希望它能帮助缩短开发时间!干杯!