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

问题描述

P.S。我使用html5Mode在以下情况下<路由选择中删除'＃' href=\"http://stackoverflow.com/questions/14771091/removing-the-hashtag-from-angularjs-urls-symbol\">Removing从AngularJS的URL包括hashtag（＃符号）

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

考虑我有两个主要pages.One是在提供缩略图的照片和其URL为 / someSlug /照片。另外一种是单照片/ someSlug /照片/ somePhotoId它显示了特定照片的更大视图的URL。

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.

我的问题是显示 / someSlug /照片/ somePhotoId 当用户在照片页somePhoto缩略图点击（是的网址应更改为<$模态页C $ C> / someSlug /照片/ somePhotoId ）。但是，如果直接用户访问像这样 / someSlug /照片/ somePhotoId 单张照片页面应该来。我能够包括单张照片模板到我的路由模式，但面临的问题。无法更改URL，同时打开模式来/ someSlug /照片/ somePhotoId，因为它开辟了新的一页。

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.

我对这个两个模块：搜索
A->使用并处理照片网页搜索路线
B->使用和处理的单张照片的路线

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

由于B单张照片模板在'A'时，我已经把'B'的依赖将'A'。所以每当我试图改变链接直接/ someSlug /照片/ somePhotoId而在模态。 B的路由覆盖工作，打开网页。这个最好的例子就是Facebook的照片。试图创造一个小提琴，但它不是给我的路由的访问。只要有在Facebook上的照片网址一看，你会知道这件事。如果你需要更多的投入，请让我知道：）

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 :)

我很新的angularJS（Basics->高级阶段）。任何帮助将是非常美联社preciated。

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

推荐答案

这可以通过使用相同的URL创建两种状态来实现的。

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

有关打开的模态状态，创建一个隐藏的参数，使用 PARAMS 选项。这是用来查找天气预报的用户来自于点击或者直接。如果用户来点击，然后我们通过设置为隐藏参数的值UI的SREF 并显示模式（使用UI引导的$模态）。如果用户直接来的网址，然后我们重定向到具有相同的URL，但不同的模板和控制器的另一种状态。所有这一切都是在这种状态下被打开这就是所谓的的OnEnter 函数中完成的。由于这个国家没有模板或 templateUrl ，因此它不会改变看法。

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.

状态配置

.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>

父控制器，包含用于 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'
      }]
   };
}])

有关模式状态模板

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

有关模态控制器，contains方法驳回模式和放大器;虚拟数据

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

您可以检查在 Plunker 工作的例子，检查的 http://run.plnkr.co/plunks/wRqwPr/#/ 看到的变化网址

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屋！