Question

我有一个通过Rails传入我的Angular代码的网址。但是，当我尝试在网址中选取一个参数时，它会显示为空白。任何人都可以帮助我吗？

示例网址：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

Answer 1

这是因为您已将控制器包含ng-controller指令而不是ng-view。必须是这样的：

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

在events.html.erb：

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

Answer 2

如果Karaxuna指出的错误仍然给你空结果，可能是因为$routeParams的异步操作

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

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

Angular $ routeParams为空

2 个答案: