javascript - 在页面上以模式打开页面 url(Facebook 照片 URL)

Question

附注我正在使用 html5Mode 在下面的场景 Removing the fragment identifier from AngularJS urls (# symbol) 中删除路由中的“#”

假设我有两个主要页面。一个是提供缩略图的照片，其 URL 为 /someSlug/photos。 Other 是单张照片 '/someSlug/photos/somePhotoId' 的 url，它显示特定照片的更大 View 。

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

我有两个模块:
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 但不同模板和 Controller 的其他状态。所有这些都是在 onEnter 函数内完成的，该函数在打开此状态时被调用。由于此状态没有 template 或 templateUrl ，因此它不会更改 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'
})

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

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

父 Controller ，包含用于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 ，包含消除模态和虚拟数据的方法

.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 的变化