javascript - 在 Angular UI Router 中发送多个参数而不指定 url?

标签 javascript angularjs angular-ui-router state

我有一个具有两种状态的应用程序。 State1没有模态对话框,State2有自定义模态框。如果我在 State2 模式窗口打开时单击浏览器后退按钮,它将返回到之前的状态 State1。我不想要这个(因为如果您多次打开和关闭模式,浏览器将返回所有这些)。删除 UI 路由器中的 URL 可以解决这个问题,但我还有另一个问题。

我需要向各州发送多个参数,但显然它只允许我发送一个。我有以下状态。

.state('state2',{
    params: {id: NaN, type: "empty"},
    views:{
        'modalContent':{
            templateUrl: 'templates/modal-content-super-region.html',
            controller: 'ModalStatesCtrl'
        }
    }
})

以及以下指令:

<a ui-sref="state2({id: 1, type: 'someStringHere'})">The link</a>

当我控制台日志 $stateParams 时,我得到以下信息:

{ id: 1, type: "空"}

因此指令正确地传入了 id,但根本没有设置类型,传入的类型仍保留为默认值。有什么我可以做的吗?如果没有 URL(我绝对不能有),我可以只传递一个状态参数吗?

最佳答案

a working plunker 。我不得不说,看来你的例子,你的解释正在按原样发挥作用。也许只是代码中的一些拼写错误...

因此,state2 和 state1 未更改(使用 url 来查看一些生成的 href)

// just to have state with standard <a> generated - url is needed
.state('state1', {
  // url is supporting href being generated
  url: "/state1",
  params: {
    id: NaN,
    type: "empty"
  },
  views: {
    'modalContent': {
      templateUrl: 'templates/modal-content-super-region.html',
      controller: 'ModalStatesCtrl'
    }
  }
})
// unchanged state def
.state('state2', {
  params: {
    id: NaN,
    type: "empty"
  },
  views: {
    'modalContent': {
      templateUrl: 'templates/modal-content-super-region.html',
      controller: 'ModalStatesCtrl'
    }
  }
});

这是它们被调用和传递参数的方式:

<a ui-sref="state1({id: 1, type: 'someStringHere'})">
<a ui-sref="state2({id: 22, type: 'someOtherHere'})">

检查一下here

关于javascript - 在 Angular UI Router 中发送多个参数而不指定 url?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31620355/

相关文章:

javascript - 何时在 Angular JS 中使用发射和广播?

javascript - 将函数放入 td 中

javascript - jquery panzoom 点击

javascript - 重构复杂 if 表达式的最佳方法

javascript - 重新加载 Angular 子组件会将用户带到本地主机 :4200

javascript - ng-controller 和 ui-view 不适用于同一元素

angularjs - ui-router : named views (multiple) views, 保持一切分离?

javascript - 如何在 Photoshop 中将图层转换为智能对象?

javascript - Vue 路由器 beforeEnter 与 beforeEach

javascript - ng-model 和 ng-repeat 关系和理解 $scope