Question

我有一个简单的角度JS应用程序，其中有一个主容器html视图页面，一个用于在视图之间导航的左侧菜单。

 //Left panel menu links
 <li><a href ng-click="vm.showPanel('View1')">View1</a></li>
 <li><a href ng-click="vm.showPanel('View2')">View2</a></li>
 <li><a href ng-click="vm.showPanel('View3')">View3</a></li>
  //JS function to load view
  vm.showPanel = function (panelName) {

hideAllPanels();

if (panelName == 'View1') {
        vm.isView1Visible = true;
   }
}

以上工作正常，现在我要做的是在View1.html中添加一个名为＆＃34; Next＆＃34;这将加载view2.html＆amp;的下一个视图等等。请注意，view1.html％view2.html都在容器html页面中。任何人都可以告诉我这样做的角度方式是什么？

此致

Answer 1

维护一个包含Views html list的变量，如下所示，并且可以使用ng-repeat

进行渲染

<强>控制器

$scope.viewList = ['View1','View2','View3'];

<强> HTML

 <li><a href ng-repeat="view in viewList" ng-click="vm.showPanel(view )">Next</a></li>

更优雅的解决方案是重新实现整个节目标签并使用ui-router或angular-route隐藏标签逻辑，因为它看起来像纯SPA的东西。

对于Angular Route

Plunkr

Plunkr适用于Angular UI-Router

Angular JS从view1.html加载view2.html

1 个答案: