Angular JS 从 view1.html 加载 view2.html答案

【问题标题】：Angular JS load view2.html from view1.htmlAngular JS 从 view1.html 加载 view2.html
【发布时间】：2015-03-21 18:09:21
【问题描述】：

我有一个简单的 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 页面中。谁能告诉我这样做的角度方式是什么？

问候

【问题讨论】：

标签： angularjs html routes angular-routing

【解决方案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 用于角路由

Plunkr 用于 Angular UI-Router

【讨论】：

谢谢，效果很好，是否可以从 $scope.$parent.hideAllPanels() 之类的子页面调用父页面 JS 函数。
@Max 你当然可以使用$scope.$parent调用父作用域函数
嗨 Pankaj，我能够获得在父作用域中定义的属性，但是当我尝试调用父 JS 函数“$scope.$parent.hideAllPanels();”时，我得到一个“未定义不是函数”错误。
这意味着你的父范围不包含hideAllPanels方法，