打开页面的URL模式在页面上（Facebook的照片的URL）(Open page url in m

我使用html5Mode到路由在下面方案中删除“＃” PS 删除从AngularJS网址片段标识符（＃符号）

你看我有两个主要pages.One是在提供缩略图的照片和其URL为/someSlug/photos 。另一种是单个照片“/ someSlug /照片/ somePhotoId”，其示出了一个特定的照片的更大视图的URL。

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

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

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

我是很新的angularJS（Basics->高级阶段）。任何帮助将高度赞赏。

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

对于打开的模态状态，创建一个隐藏的参数，使用params选项。这是用来查找天气预报的用户来自点击或直接。如果用户来点击，然后我们设置通过隐藏参数的值ui-sref和显示模式（使用UI引导的$模式）。如果用户直接来的网址，然后我们将其重定向到具有相同的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 ，检查http://run.plnkr.co/plunks/wRqwPr/#/看到URL的变化