在页面上以模式打开页面 URL(Facebook 照片 URL) [英] Open page url in modal on a page (Facebook Photo URLs)

问题描述

附言我在下面的场景中使用 html5Mode 删除路由中的#"删除片段标识符来自 AngularJS 网址(# 符号)

考虑我有两个主要页面.一个是提供缩略图的照片，其 url 是 /someSlug/photos.另一个是单张照片的网址/someSlug/photos/somePhotoId"，它显示了特定照片的更大视图.

我的问题是当用户单击照片页面中的 somePhoto 缩略图时以模式显示 /someSlug/photos/somePhotoId 页面(是的，网址应更改为 /someSlug/photos/somePhotoId).但是如果用户像这样直接访问它 /someSlug/photos/somePhotoId 单张照片页面应该会出现.我能够将单张照片模板包含在我的模态中，但面临路由问题.无法在打开模态时更改 url 到/someSlug/photos/somePhotoId，因为它打开了新页面.

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

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

我对 angularJS 很陌生(基础->高级阶段).任何帮助将不胜感激.

解决方案

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

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

状态配置

.state('画廊', {网址:/"，templateUrl: "gallery.html",控制器:'galleryCtrl'}).state('gallery.photoModal', {网址:照片/:id"，参数:{来自画廊:空},onEnter: ['$stateParams', '$state', '$modal', function($stateParams, $state, $modal) {如果($stateParams.fromGallery === true){console.log('进入模态视图');$modal.open({templateUrl: 'modal.html',控制器:'modalCtrl'，尺寸:'lg'}).result.finally(function() {$state.go('画廊');//父状态});} 别的 {console.log('进入完整视图');$state.go('gallery.photoFull', {id: $stateParams.id});}}],onExit: ['$modalStack', function($modalStack) {//关闭 Modal if Open ，以处理浏览器后退按钮按下$modalStack.dismissAll();}]}).state('gallery.photoFull', {网址:'照片/:id'，templateUrl: "photo.html",控制器:'photoCtrl'})

父状态的模板，点击此处显示模态

<div class="contain" ><div ng-repeat='photos in gallery.photos'><a ui-sref="gallery.photoModal({id: photos.id,fromGallery:true})"><img ng-src="{{photos.photoURL}}" width="200" height="200"/></a>

父控制器，包含用于ngRepeat

的虚拟数据

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

模态状态的模板

<a ng-click="dismiss.modal()" class="pull-right" href>关闭</a><img ng-src="{{photo.photoURL}}" width="500" height="500"/>

模态状态控制器，包含解除模态的方法&虚拟数据

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

您可以在 Plunker 查看工作示例，查看 http://run.plnkr.co/plunks/wRqwPr/#/ 查看 URL 的变化>

P.S. I am using html5Mode to remove '#' in routing in below scenario Removing the fragment identifier from AngularJS urls (# symbol)

Consider I have two main pages.One is photos where thumbnails are provided and whose url is /someSlug/photos. Other is the url of a single photo '/someSlug/photos/somePhotoId' which shows a bigger view of a particular photo.

My problem is to show the /someSlug/photos/somePhotoId page in modal when user clicked on somePhoto thumbnail in photos page (and yes the url should change to /someSlug/photos/somePhotoId). But if user access it directly like this /someSlug/photos/somePhotoId single photo page should come. I am able to include the single photo template into my modal but facing issues with routing. Not able to change the url while opening the modal to /someSlug/photos/somePhotoId because it opens up new page.

I have two modules for this:
A-> Used and handles routes of photos page
B-> used and handle routes of single photo

Since B single photo template is used in 'A', I have put dependency of 'B' into 'A'. So whenever I try to change the url to /someSlug/photos/somePhotoId while in modal. B's routing overrides the job and open the page. Best example for this is facebook photos. Tried to create a fiddle but its not giving me routing access. Just have a look on facebook photos URL and you will come to know about it. If you needs more inputs, please let me know :)

I am very new to angularJS (Basics->Advanced Stage). Any help would be highly appreciated.

解决方案

This can be achieved by creating two states with same URL.

For the state that opens the modal , create a hidden parameter , using params option. This is used to find weather the user came from clicking or directly. If user comes by clicking ,then we set a value for the hidden parameter via ui-sref and show the modal (using UI Bootstrap's $modal). In case user comes directly to the URL, then we redirect them to the other state with same URL but different template and controller. All this is done inside the onEnter function which is called when this state gets opened. As this state has no template or templateUrl , therefore it doesn't change the view.

The state configuration

.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'
})

The template for the parent state , from where we click to show the modal

<div class="spacing" ui-view>
  <div class="contain" >
    <div ng-repeat='photos in gallery.photos'>
      <a ui-sref="gallery.photoModal({id: photos.id,fromGallery:true})">
        <img ng-src="{{photos.photoURL}}" width="200" height="200" />
      </a>
    </div>
  </div>
</div>

The parent controller , contains dummy data which is used for 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'
      }]
   };
}])

The template for the Modal State

<div class="spacing">
  <a ng-click="dismiss.modal()" class="pull-right" href>Close</a>
  <img ng-src="{{photo.photoURL}}" width="500" height="500" />
</div>

The controller for modal state , contains method to dismiss the modal & dummy data

.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'
    };
}])

You can check a working example at Plunker , check http://run.plnkr.co/plunks/wRqwPr/#/ to see the changes in URL

这篇关于在页面上以模式打开页面 URL(Facebook 照片 URL)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！