Angular UI路由器如何重定向深层链接？

Question

我是Angular UI路由器的新手，并试图了解如何防止用户使用保存的超链接跳入我的应用程序中间。 我总是希望所有收藏夹或以其他方式记住的链接在最初到达站点时都被迫运行代码运行。 但是，我不想阻止用户通过应用程序菜单和选项卡进入状态。

在代码方面，我要执行的操作是在下面的状态树中强制将链接链接到“ / feature1 / subfeature1”到“ /”，但前提是该链接来自用户记住的某个链接。

$stateProvider
.state('main', {
  url: "/",
  templateUrl: "partials/main.html"
})
.state('feature1', {
  url: "/feature1",
  templateUrl: "partials/feature1.html"
})
.state('feature1.subfeature1', {
  url: "/feature1/subfeature1",
  templateUrl: "partials/feature1.subfeature1.html",
  controller: ......
  }
})

Angular UI Router FAQ中有关于阻止用户进入状态的部分，但是当我运行示例时，将为所有stateChangeStart事件调用事件处理程序，包括通过$ state.go（）在应用程序内进行合法导航。 我希望能够区分跳入应用程序中间的检测超链接和$ state.go（），因为我仅使用$ state.go（）来导航状态。 代码方面，我认为想做类似下面的代码。 但是，不知道什么代码会进入“此处需要测试”。

 app.run(function($rootScope, $state,) {
   $rootScope.$on('$stateChangeStart', function(e, to) {

    var isDeepLink =  NEED TEST HERE 

    if (isDeepLink ) {
      e.preventDefault();
    // Optionally set option.notify to false if you don't want 
    // to retrigger another $stateChangeStart event
     $state.go("\");
    }
}
});

有什么想法吗？

谢谢，

杰瑞

Answer 1

如何创建一个注册应用程序是否已初始化的服务。 在此示例中，我将“应用已初始化”定义为“已调用根状态的控制器”。

app.service("appInit", function() { 
    var done = false;
    return { 
        isDone: function() { return isinitialized; },  
        initDone: function() { isinitialized = true; }
    }
}

---

app.run(function($rootScope, $state, appInit) {
  $rootScope.$on('$stateChangeStart', function(e, to) {
  if (!appInit.isDone()) {
    e.preventDefault();
    // Optionally set option.notify to false if you don't want 
    // to retrigger another $stateChangeStart event
    $state.go("\");
  }
}

---

$stateProvider
.state('main', {
  url: "/",
  templateUrl: "partials/main.html",
  controller: function(appInit) { appInit.initDone(); }
})

---

编辑：一个简单得多的解决方案：

这种更简单的解决方案之所以有效，是因为唯一一次从根状态（“”）进行转换的时间是在首次加载应用程序时的初始转换期间。

app.run(function($rootScope, $state, appInit) {
  $rootScope.$on('$stateChangeStart', function(e, to, toParams, from) {
  if (from.name === "" && to.name !=== "main") {
    e.preventDefault();
    // Optionally set option.notify to false if you don't want 
    // to retrigger another $stateChangeStart event
    $state.go("\");
  }
}

Answer 2

您将其向后看， 除非是Deep Link， 否则 $stateChangeStart将始终触发。

因此，此代码将满足您的要求，

app.run(function($rootScope, $state,) {
  $rootScope.$on('$stateChangeStart', function(e, to) {
     // code here runs if it is not a deep link
  });
  // code here runs if its a deep link
}