在页面上以模态打开页面url（Facebook照片url）

PS我在下面的场景中使用html5Mode删除路由中的’＃’ 从AngularJS urls中删除片段标识符（＃符号）

考虑我有两个主要页面。一个是提供缩略图的照片，其url为/someSlug/photos 。 其他是一张照片的url’/ someSlug / photos / somePhotoId’，它显示了特定照片的更大视图。

我的问题是当用户点击照片页面中的somePhoto缩略图时，以模态显示/someSlug/photos/somePhotoId页面（是的，url应更改为/someSlug/photos/somePhotoId ）。 但是，如果用户直接访问它/someSlug/photos/somePhotoId单个照片页应该来。 我可以将单张照片模板包含在我的模态中，但面临路由问题。 打开modal到/ someSlug / photos / somePhotoId时无法更改URL，因为它会打开新页面。

我有两个模块：
A->使用并处理照片页面的路径
B->使用和处理单张照片的路线

由于B单照片模板用于’A’，我将’B’的依赖放入’A’。 因此每当我尝试在模态中将URL更改为/ someSlug / photos / somePhotoId时。 B的路由会覆盖作业并打开页面。 最好的例子是facebook照片。 试图创建一个小提琴，但它不给我路由访问。 只需查看Facebook照片url，您就会了解它。 如果您需要更多输入，请告诉我:)

我是angularJS（基础 – >高级舞台）的新手。 任何帮助将受到高度赞赏。

Answer 1

这可以通过创建具有相同URL的两个状态来实现。

对于打开模态的状态，使用params选项创建隐藏参数。 这用于查找用户点击或直接点击的天气。 如果用户点击，则我们通过ui-sref为隐藏参数设置一个值并显示模态（使用UI Bootstrap的$ modal）。 如果用户直接访问URL，我们会将它们重定向到具有相同URL但不同模板和控制器的其他状态。 所有这一切都在onEnter函数内部完成，该函数在此状态打开时调用。 由于此状态没有template或templateUrl ，因此它不会更改视图。

状态配置

 .state('gallery', { url: "/", templateUrl: "gallery.html", controller: 'galleryCtrl' }) .state('gallery.photoModal', { url: "photo/:id", params: { fromGallery: null }, onEnter: ['$stateParams', '$state', '$modal', function($stateParams, $state, $modal) { if ($stateParams.fromGallery === true) { console.log('Goes To Modal View'); $modal.open({ templateUrl: 'modal.html', controller: 'modalCtrl', size: 'lg' }).result.finally(function() { $state.go('gallery'); // Parent state }); } else { console.log('Goes To Full View'); $state.go('gallery.photoFull', { id: $stateParams.id }); } }], onExit: ['$modalStack', function($modalStack) { // Dismisses Modal if Open , to handle browser back button press $modalStack.dismissAll(); }] }) .state('gallery.photoFull', { url: 'photo/:id', templateUrl: "photo.html", controller: 'photoCtrl' }) 

父状态的模板，从中我们单击以显示模态

父控制器包含用于ngRepeat虚拟数据

 .controller('galleryCtrl', ['$scope', function($scope) { $scope.gallery = { photos: [{ photoURL: 'https://placeholdit.imgix.net/~text?txtsize=40&txt=200%C3%97200&w=200&h=200', id: '1' }] }; }]) 

模态的模板

 
 Close   

模态状态的控制器包含消除模态和虚拟数据的方法

 .controller('modalCtrl', ['$scope', '$modalInstance', function($scope, $modalInstance) { $scope.dismiss = { modal: function() { $modalInstance.dismiss('cancel'); } }; $scope.photo = { photoURL: 'https://placeholdit.imgix.net/~text?txtsize=80&txt=500%C3%97500&w=500&h=500', id: '1' }; }]) 

您可以查看Plunker的工作示例，查看http://run.plnkr.co/plunks/wRqwPr/#/以查看URL中的更改