javascript - 在 AngularJS 中使用嵌套 View 时如何保留引用？

Question

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

这里有 4 个选项:
CN > 第1页 - 内容:计算机
CN > 第2页 - 内容:键盘

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

如何将嵌套 View 切换为其等效 View ？

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

感谢任何帮助!谢谢!

<小时/>

Expected Behaviour. When I click on "Francais", say I am on /en/page1/, I want it to properly re-route to, in this case, /fr/page1.

<小时/>

Actual Behaviour. When I click on "Francais", say I am on /en/page1/, it re-routes me to /fr and I don't know how to approach the problem at hand.

Answer 1

我 fork 了一个新的 plunker 并更新了它。挑战在于观察路线提供商的范围，以了解存在哪些先前值。查看当前状态和名称，您可以在 Controller 中有条件地控制保留哪个 View 。为此，我创建了一个新函数:

  //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 中添加了一些日志记录，这样你就可以看到值的变化 我确实将应用程序的名称从 theApp 更改为 app，所以在复制粘贴时要小心。

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

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

我还使用 let 声明与 var 来隔离变量范围，但您可以根据需要使用 var。

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