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

Question

P.S。我正在使用 html5Mode 在以下场景中删除路由中的“#” Removing the fragment identifier from AngularJS urls (# symbol)

考虑一下我有两张主要的 pages.One 是提供缩略图的照片，其 url 是 /someSlug/photos。其他是单张照片“/someSlug/photos/somePhotoId”的 url，它显示了特定照片的更大视图。

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

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

由于'A'中使用了B单照模板，我将'B'的依赖放到了'A'中。因此，每当我尝试在模态中将 url 更改为 /someSlug/photos/somePhotoId 时。 B 的路由覆盖作业并打开页面。最好的例子是 Facebook 照片。试图创建一个 fiddle 但它没有给我路由访问权限。只要看看 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'
})

父状态的模板，我们从那里点击显示模态

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

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

.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 , check http://run.plnkr.co/plunks/wRqwPr/#/ 查看工作示例以查看 URL

中的更改

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

Open page url in modal on a page (Facebook Photo URLs)

javascript

jquery

url-routing

angularjs

angularjs-routing