Question

P.S。我正在使用html5Mode删除＆＃39;＃＆＃39;在下面的方案Removing the fragment identifier from AngularJS urls (# symbol)

中进行路由

考虑我有两个主要页面。其中一个是提供缩略图且其网址为/someSlug/photos的照片。其他是一张照片的网址＆some; / someSlug / photos / somePhotoId＆＃39;它显示了特定照片的更大视图。

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

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

由于B单张照片模板用于＆＃39; A＆＃39;，我已经依赖B＆＃39; B＆＃39;进入＆＃39; A＆＃39;。因此每当我尝试在模态中将url更改为/ someSlug / photos / somePhotoId时。 B的路由会覆盖作业并打开页面。最好的例子是facebook照片。试图创建一个小提琴，但它不给我路由访问。只需查看Facebook照片网址，您就会了解它。如果您需要更多输入，请告诉我：）

我是angularJS（Basics-＆gt; Advanced Stage）的新手。任何帮助都将受到高度赞赏。

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查看工作示例，查看http://run.plnkr.co/plunks/wRqwPr/#/以查看网址中的更改

在页面上以模态打开页面网址（Facebook照片网址）

1 个答案: