使用ui-router

时间:2016-06-15 16:49:49

标签: javascript angularjs angular-ui-router

对Angular很新,我相信我在这里遗漏了一些明显的东西。我正在使用ui-router。

我想提供一个指向我的客户的链接,以便他们可以点击URL链接并访问具有相应部分的Web应用程序。我也希望能够传递参数。这就是我接近这个问题的方式(一种笨蛋)。这是在我的主控制器中:

var pNumber = $location.search().number;
    if (!(pNumber == null || pNumber == "")){
        $state.go('view-ticket');
    }

这是我的app.js:

  $stateProvider
    .state('home', {
      url: "/",
      templateUrl: 'partials/welcome-screen.html',
      controller: 'mainPageController'
    })
    .state('submit-ticket', {
      url: "/submit-ticket",
      templateUrl: 'partials/ticket-submit.html',
      controller: 'TicketSystemTestCtrl'      
    })
    .state('view-ticket', {
      url: "/view",
      templateUrl: "partials/ticket-central.html",
      controller: 'TicketCentralCtrl'
    })

逻辑是这样的:如果URL包含一个参数'数字'注入ticket-central.html部分。

但是,当我在调试器中运行它时,似乎代码的第一部分在加载welcome-screen.html partial之前已执行。怎么解决这个问题?

编辑:我正在尝试将其键入URL:http://localhost/techsupport/view,我希望它将ticket-central.html partial加载到主视图中。但是,它不会起作用。

1 个答案:

答案 0 :(得分:0)

如果我理解正确你想要做的就是提供“深度链接”到“查看票证”状态的可能性。

这个搜索参数不是理想的解决方案,因为它们是可选的,只需使用路径变量:

.state('view-ticket', {
  url: '/view/:ticketNumber,
  template: 'partials/ticket-central.html',
  controler: 'TicketCentralCtrl'
})

如果你真的没有,也不要使用$ location服务,看看$ stateParams

这是一个带有欢迎和票务状态的小傻瓜 在单独的窗口中启动预览以查看网址如何更改 - 您还可以在每个页面上刷新并加载正确的状态

https://plnkr.co/edit/r3UcYbfwET0OVwkd77Rv