AngularJS UI Router: add variable to scope of state without specifying it in 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.

looks like filmTitle is in response data from $http request, I don't think you can get that from $stateParams. — YOU
– YOU, Commented Apr 11, 2015 at 15:21

New Dev · Accepted Answer · 2015-04-11 15:31:54Z

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);
    // ...
  },
  // ...
});

answered Apr 11, 2015 at 15:31

New Dev

49.8k12 gold badges99 silver badges140 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Arnaud Renaud Over a year ago

This works. However, after adding params: { filmTitle: undefined },, I cannot reload (or copy/paste) the state URL and keep the state: it loads the default URL instead.

New Dev Over a year ago

@ArnaudRenaud, what do you mean by "keep the state"? what is "default URL"?

Arnaud Renaud Over a year ago

the default URL is the one I have configured like this: $urlRouterProvider.otherwise('/films');. Keeping the state is being able to refresh the page without losing the page layout.

Arnaud Renaud Over a year ago

Actually, after adding filmTitle to params, the proper state URL remains after reloading but the layout of the page is back to default.

New Dev Over a year ago

When you refresh the page, it loses filmTitle obviously - the only seed parameters are those that are defined on the URL (not what you intended, though, for filmTitle), so the view would render as if filmTitle === undefined. As to default url - then, you must not be matching /showtimes/:filmId

Collectives™ on Stack Overflow

AngularJS UI Router: add variable to scope of state without specifying it in URL

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related