角度 $routeParams 为空答案

【问题标题】：Angular $routeParams is empty角度 $routeParams 为空
【发布时间】：2015-09-19 14:19:36
【问题描述】：

我有一个通过 Rails 传递到我的 Angular 代码中的 url。但是，当我尝试在 url 中获取参数时，它显示为空白。谁能帮帮我？

示例网址：http://localhost:3000/events/event1

Plnkr：http://plnkr.co/edit/yG8wAZHhgPtH2PBFzql3?p=preview

角度：

eventsApp = angular.module('EventsApp', ['ngRoute'])


eventsApp.config [
    '$routeProvider'
    '$locationProvider'
    ($routeProvider, $locationProvider) ->
        $locationProvider.html5Mode(true)
        $routeProvider.when '/events/:eventName',
            templateUrl: '../../views/events/events.html.erb'
            controller: 'EventsCtrl'            
        return
]

eventsApp.controller('EventsCtrl',  [ 
    '$scope'
    '$routeParams'
    ($scope, $routeParams) ->       
        console.log($routeParams.eventName) # shows up as undefined
        $scope.greeting = $routeParams.eventName
])

HTML：

events.html.erb

    <div>
        {{greeting}}
    </div>

application.html.erb（整体布局）

<div id="content" ng-app="EventsApp">
        <div ng-view></div>
        <%= yield %>
    </div>

编辑：按照建议，我已将 ng-app 和 ng-view 移动到布局中，并仅保留 events.html.erb 中的 div

【问题讨论】：

尝试通过记录一些字符串来确保您的控制器工作正常。一旦你确定它可以工作，你就可以调试$routeParams

标签： javascript ruby-on-rails angularjs coffeescript

【解决方案1】：

如果Karaxuna指出的bug还是给你空结果，可能是$routeParams异步操作的原因

$routeParams 通常需要一些时间来加载。它正在异步加载。当您尝试使用它时，它可能还没有准备好并且仍然是空的。一种方法是，在路由准备好时创建事件侦听器。

$scope.$on('$routeChangeSuccess', function() {
  console.log($routeParams.eventName);
});

【讨论】：

我已经按照您的建议尝试过，它也显示为空白
可以提供plnkr吗？
我不确定如何在 plnkr 中测试 @routeProvider。我不认为这是问题，但我认为你有错字。不应该是控制器的没有返回语句。

【解决方案2】：

这是因为您使用ng-controller 指令而不是ng-view 包含控制器。应该是这样的：

<body ng-app="EventsApp">
    <div ng-view></div>
</body>

在events.html.erb:

<div>
    {{greeting}}
</div>

【讨论】：

我用我认为你在说的话更新了我的帖子 - 你介意看一下吗？
@Andrew 不，{{greeting}} 必须在部分视图中。那么ng-view 是做什么的呢？它查看您的路线并确定应在具有ng-view（在本例中为div）的元素内加载哪个控制器和视图。