I have a list of videos, and when a user clicks one of them, I don't want another view to open. Instead I want the selected video to open in an overlay over the other videos. When that overlay with the video is closed, the list of videos from under it will simply reveal themselves again, without the need to load or request anything once more.
The overlay is done very simply, as such:
<div class="overlay" ng-show="watching">
Where the watching
variable is the video which is selected to be playing. In order to stop watching the video, I just set the watching
variable to null
to effectively close the overlay.
The problem that I cannot solve here, is that when you click to watch a video, the URL has to change, because I want users to be able to share it. But by doing so, my view is also reloaded, and the animation from the animated view also plays again. Which is all bad.
I was expecting the reloadOnSearch
parameter to solve exactly that problem, but it doesn't seem to change anything in this regard. This is the declaration of both the videos list URL, and the watch URL in my config, which I was hoping to solve by making the watch URL optional:
.when("/videos/:action?/:videoId?", {
controller: "VideosController",
templateUrl: "tpl/partials/videos.html",
reloadOnSearch: false
})
The URL for the list of videos is /videos
, and the URL for watching a specific video is /videos/watch/id
.
So what I want is to be able to manually change my URL from /videos
to /videos/watch/id
, and vice-versa, without Angular executing anything, any controllers, and loading any views. But at the same time, obviously, if I change it to other URL for the rest of my page, such as /contact
, then it needs to continue its normal work by executing the appropriate controller for that page.