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

Question

我有4页。
2页英语和2页法语。

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

FR＆gt;第1页 - 内容：纵横
FR＆gt;第2页 - 内容： Clavier

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

我把一个plnkr放在一起。
https://embed.plnkr.co/SZPp0C8guVeTtcLeWJ3T/

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

  

预期行为。当我点击“Francais”时，说我在/en/page1/，我希望它正确地重新路由，在这种情况下，/fr/page1。

  

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

Answer 1

我分叉了一个新的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（）监视新旧值，然后根据条件设置状态。 *警告：我认为这个解决方案适用于像这个导航这样的小规模，但是如果你有多个页面我会看到不同的路线。

updated plunker

我确实在html中添加了一些日志记录，因此您可以看到值发生变化 我确实将应用程序的名称从应用程序更改为应用程序，因此请谨慎粘贴。

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

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

我还使用let声明与var隔离变量范围，但您可以使用var，如您所愿。

最后，当我的更改改变路线时，第一页的路线始终是应用程序启动时的默认加载路线，但这应该足以让您前进。