AngularJS UI路由器：将变量添加到状态范围而不在URL中指定

Question

I want to pass the attribute film.title to the state template without having to specify it in the state URL .

index.html:

<a ui-sref="showtimes({ filmId: film.uid, filmTitle: film.title })">

app.js:

    .state('showtimes', {
        url: '/showtimes/:filmId',
        controller: function($scope, $http, $stateParams) {
            $http.get('api/showtimes/?film_id=' + $stateParams.filmId).success(function(data) {
                $scope.showtimes = data;
            });
        },
        templateUrl: 'static/showtimes.html'
    });

showtimes.html:

<p>{{film}}</p>

I tried adding $scope.film = $stateParams.filmTitle; to the controller. It didn't work. I also tried $scope.film = $state.params.filmTitle; without any more luck.

Answer 1

You can specify non-URL parameters with params property:

.state('showtimes', {
  url: '/showtimes/:filmId',
  params: {
    filmTitle: undefined // or "default Title"
  },
  controller: function($scope, $http, $stateParams) {
    console.log($stateParams.filmTitle);
    // ...
  },
  // ...
});