Javascript 在AngularJS中使用嵌套视图时，如何保留引用？

我有4页
英文2页，法文2页

以下是4个选项：
EN>第1页-内容：计算机
EN>第2页-内容：键盘

FR>第1页-内容：纵坐标 FR>第2页-内容：键盘

如何将嵌套视图切换为其等效视图

我已经组装了一个plnkr

感谢您的帮助！谢谢

---

预期的行为。当我点击“Francais”时，假设我在

/en/page1/

，我希望它正确地重新路由到，在这种情况下，

/fr/page1

---

实际行为。当我点击“Francais”时，假设我在

/en/page1/

，它会将我重新路由到

/fr

，我不知道如何处理手头的问题

---

我找到了一个新的Plunk并对其进行了更新。挑战在于观察路由提供程序的范围，以查看之前存在哪些值。查看当前状态和名称，您可以在控制器中有条件地控制哪个视图被持久化。为此，我创建了一个新函数：

  //evaluate routes
  let checkRouteValues = (oldVal, newVal)=>{
    $scope.vm.message1 = oldVal;
    $scope.vm.message2 = newVal;

    //first check to see if language has changed
    if(newVal === 'english'&& oldVal ==='francais.page1'){
     $state.go('english.page1');
    }else if(newVal === 'english' && oldVal ==='francais.page2'){
         $state.go('english.page2')
    }else if(newVal ==='francais' && oldVal === 'english.page1' ){
        $state.go('francais.page1');
    }else if (newVal ==='francais' && oldVal === 'english.page2' ){
      $state.go('francais.page2');
    }
  }

然后添加了一个手表以查看状态何时更改：

 //added a watch to monitor the current state
  $scope.currState =$state;
  $scope.$watch('currState.current.name', function (newValue, oldValue){

     checkRouteValues(oldValue, newValue)
  });

函数checkRouteValues（）监视新值和旧值，然后根据条件设置状态。 *警告：我认为这个解决方案适用于小规模的导航，但是如果你有多个页面，我会选择不同的路线

我确实在html中添加了一些日志记录，以便您可以看到值的变化 我确实将应用程序的名称从app更改为app，所以如果你粘贴，请小心

我确实在代码中使用了箭头函数，如果您不喜欢箭头函数，可以将其转换回

let checkRouteValues = function(oldVal, newVal){...}

我还使用了

let

声明与

var

来隔离变量范围，但您可以按照自己的喜好使用var

---

最后，通过我的更改，路线英语，第一页，始终是应用程序启动时的默认加载路线，但这应该足以让您继续。

我创建了一个新的plunker并对其进行了更新。挑战在于观察路由提供程序的范围，以查看之前存在哪些值。查看当前状态和名称，您可以在控制器中有条件地控制哪个视图被持久化。为此，我创建了一个新函数：

  //evaluate routes
  let checkRouteValues = (oldVal, newVal)=>{
    $scope.vm.message1 = oldVal;
    $scope.vm.message2 = newVal;

    //first check to see if language has changed
    if(newVal === 'english'&& oldVal ==='francais.page1'){
     $state.go('english.page1');
    }else if(newVal === 'english' && oldVal ==='francais.page2'){
         $state.go('english.page2')
    }else if(newVal ==='francais' && oldVal === 'english.page1' ){
        $state.go('francais.page1');
    }else if (newVal ==='francais' && oldVal === 'english.page2' ){
      $state.go('francais.page2');
    }
  }

然后添加了一个手表以查看状态何时更改：

 //added a watch to monitor the current state
  $scope.currState =$state;
  $scope.$watch('currState.current.name', function (newValue, oldValue){

     checkRouteValues(oldValue, newValue)
  });

函数checkRouteValues（）监视新值和旧值，然后根据条件设置状态。 *警告：我认为这个解决方案适用于小规模的导航，但是如果你有多个页面，我会选择不同的路线

我确实在html中添加了一些日志记录，以便您可以看到值的变化 我确实将应用程序的名称从app更改为app，所以如果你粘贴，请小心

我确实在代码中使用了箭头函数，如果您不喜欢箭头函数，可以将其转换回

let checkRouteValues = function(oldVal, newVal){...}

我还使用了

let

声明与

var

来隔离变量范围，但您可以按照自己的喜好使用var

---

最后，通过我的更改，路线英语，第一页，始终是应用程序启动时的默认加载路线，但这应该足以让您继续。当您单击语言链接时，是否希望它转到每种语言的

Page1

？你可能永远都不想去

/en

或

/fr

，你总是想去

/en/page1

或

/fr/page1

…是的！我永远不想在第一级页面上结束。我总是希望语言锚把我带到

/en/*

或

/fr/*

对，那么你永远不想使用

ui sref=“english”

，例如，因为它映射到

/en

url。如果您的目标只是转到第1页，则修复

ui sref

项。如果你的目标是记住他们在哪一页并转到那一页，那么你仍然需要修复

ui sref

，但它将基于保存页码的属性。你可能希望

engilsh

状态为

abstract

@Claies我知道你的意思，但我只是不知道如何执行它哈哈。你能修改我的plnkr并给我看看吗？我是一名视觉学习者：）单击语言链接时，是否希望它转到每种语言的

Page1

？你可能永远都不想去

/en

或

/fr

，你总是想去

/en/page1

或

/fr/page1

…是的！我永远不想在第一级页面上结束。我总是希望语言锚把我带到

/en/*

或

/fr/*

对，那么你永远不想使用

ui sref=“english”

，例如，因为它映射到

/en

url。如果您的目标只是转到第1页，则修复

ui sref

项。如果你的目标是记住他们在哪一页并转到那一页，那么你仍然需要修复

ui sref

，但它将基于保存页码的属性。你可能希望

engilsh

状态为

abstract

@Claies我知道你的意思，但我只是不知道如何执行它哈哈。你能修改我的plnkr并给我看看吗？我是一名视觉学习者：）非常感谢@rlcrows！你给了我一个有效的例子，对你在代码中所做的每一件事都做了完整的解释，指出了一个警告，建议了一个最佳实践的替代方案，并对你为什么要这样做和那样做进行了比较。多亏了你，我的问题得以解决，我成功地将你的解决方案实施到我的项目中。你是上帝！非常感谢@rlcrews！你给了我一个有效的例子，对你在代码中所做的每一件事都做了完整的解释，指出了一个警告，建议了一个最佳实践的替代方案，并对你为什么要这样做和那样做进行了比较。多亏了你，我的问题得以解决，我成功地实现了你的解决方案