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

Question

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

这是4个选项：
ZH>第1页-内容： 计算机
简体中文>第2页-内容： 键盘

FR>第1页-内容： Ordinateur
FR>第2页-内容： 键盘

如何切换嵌套视图的等效视图？

我已经整理好了。
https://embed.plnkr.co/SZPp0C8guVeTtcLeWJ3T/

任何帮助表示赞赏！ 谢谢！

---

预期的行为。 当我单击“ Francais”时，说我在/en/page1/ ，我希望它正确地重新路由到/fr/page1 。

---

实际行为。 当我单击“ Francais”时，说我在/en/page1/ ，它会将我重新路由到/fr ，但我不知道该如何解决当前的问题。

Answer 1

我派出了一个新的矮人，并对其进行了更新。 面临的挑战是观察路由提供者的范围，以查看存在哪些先前值。 查看当前状态和名称，您可以有条件地在控制器中控制保留哪个视图。 为此，我创建了一个新功能：

  //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（）监视新值和旧值，然后根据条件设置状态。 * caveat：我认为此解决方案适用于小规模的导航，例如此处的导航，但是，如果您有多个页面，我会选择不同的路线。

更新的插头

我确实在html中添加了一些日志记录，因此您可以看到值发生了更改，我确实将应用程序的名称从theApp更改为app，因此如果您cpoy粘贴，请小心。

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

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

我还使用了let声明与var来隔离变量作用域，但是可以根据需要使用var。

最后，随着我的更改，更改路线英语（第一页）始终是您的应用启动时默认加载的路线，但这应该足以为您提供帮助。