角度显示，以模态形式向浏览用户显示内容，但在新页面上为新用户显示内容

可能有几种方法可以做到这一点。这是我的。

大纲

当状态发生变化时，我们要检查是否可以在当前视图中的模式内提供内容，而不是完全替换当前视图。我们将在路由配置中对此进行定义-可以托管模式的视图将带有modalMaster标志，而可以在模式中显示的视图将带有modalSlave标志。

我们将使用ui.router的$stateChangeStart事件来拦截状态更改，并根据需要取消更改，这是我们打开模式的地方。

挑战性

• 如果有一个模态，我们需要保持对模态状态的了解
• 阻止状态更改还可以防止URL更改，因此我们需要手动进行操作
• 使用浏览器的“后退”按钮应关闭该模式，并使我们返回到其下方的状态。

代码

请注意，所有代码都在coffeescript和Jade中，我发现它更加整洁。如果您需要转录，请使用js2coffee.org。

路由器配置：

.config ($stateProvider, $urlRouterProvider)->

  # Add details on which templates can open models containing which other 
  # templates.
  $stateProvider.state 'shop',
    url: '/'
    templateUrl: 'shop.html'
    modalMaster: true

  $stateProvider.state 'item',
    url: '/item/{id}'
    templateUrl: 'item.html'
    modalSlave: true

  $urlRouterProvider.otherwise('/');

  # Enable handling of url changes ourselves.
  $urlRouterProvider.deferIntercept()

最后一行很重要，因为它允许我们停止url更改，稍后再更新视图。

状态和URL事件侦听器

.run ($rootScope, $state, $modal, $location, $urlRouter, $timeout)->   
  # set some flags for use later.
  modalInstance = toStatePrevented = entering = null    
  # Intercept state changes - if we're in a modal master and we're going to a
  # modal slave, open a modal containing the slave state instead.
  $rootScope.$on '$stateChangeStart', (event, toState, toParams, fromState)->
    if fromState.modalMaster and toState.modalSlave
      event.preventDefault()
      # set a property to show which state is currently in the modal
      $state.current.inModal = toState
      entering = true # for url handling
      $timeout -> # change url manually
        $location.path($state.href(toState, toParams), false)
      , 0 # the 0 timeout makes sure the preventDefault doesn't stop url 
          # change
      # open a modal containing the new state, you can merge this with 
      # modal specific properties like "resolve" etc. if you want them
      modalInstance = $modal.open(toState)
      # clear our flags when the modal closes - this only uses dismiss so we
      # only need "catch" right now.
      modalInstance.result.catch(()->
        modalInstance = toStatePrevented = $state.current.inModal = 
          entering = null
        $state.go(fromState)
      )

  $rootScope.$on '$locationChangeSuccess', (event, toUrl, fromUrl)->
    event.preventDefault()
    # if there is nothing in a modal, just handle as normal
    if !$state.current.inModal? then $urlRouter.sync()
    # dismiss modal if url changes and modal is visible
    else if not entering and modalInstance? then modalInstance.dismiss()
    # if we are opening a modal, set a flag so that next time the url changes
    # we will dismiss it.
    else entering = false

评论应解释其中的大部分内容。在实践中，您可能需要的不仅仅是这里的内容，例如，您应该确保正确处理了从模态内部单击链接的情况，但这应该可以帮助您开始。

自然，我在这里演示了此解决方案，但是请确保您使用“在单独的窗口中启动预览”功能来查看所有功能是否全部发挥作用。

结果

从导航shop到会item打开模式，但是直接item通过URL导航到会自动打开项目ui-view。