Angular JS 从 view1.html 加载 view2.html

Question

我有一个简单的 angular 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 中添加一个名为 "Next" 的按钮，它将加载下一个视图 view2.html 等。请注意 view1.html % view2.html 都在容器 html 页面中。谁能告诉我 angular 这样做的方法是什么？

问候

Answer 1

维护一个包含 Views html 列表的变量，如下所示，可以使用 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 东西。

Plunkr Angular 路线

Plunkr for Angular UI-路由器

Angular JS 从 view1.html 加载 view2.html

Angular JS load view2.html from view1.html

angularjs

html

routes

angular-routing