Angularjs - 更改模板而不更改 url答案

【问题标题】：Angularjs - change templates without changing urlAngularjs - 更改模板而不更改 url
【发布时间】：2014-09-11 11:01:52
【问题描述】：

Angular 和 JS 的新手，所以我的行话可能不正确。

在页面的某个部分，我想根据用户的点击加载不同的模板而不更改 URL 路径。我知道如何将 $routeProvider 与 ng-view 一起使用，但这需要更改 URL 才能加载相关模板。

我还想在此特定部分中添加一个反向链接，以便用户可以向后退一步。

有什么想法吗？我找不到任何与我类似的问题，但我可能使用不正确的术语进行搜索。非常感谢任何帮助或建议。

问候

【问题讨论】：

你检查ng-include了吗？
@KalhanoToressPamuditha 我没有，但这看起来像是解决方案。谢谢。

标签： javascript angularjs templates url

【解决方案1】：

对于后退按钮，您必须保留一个包含过去点击/链接的历史数组，并在您单击并点击后退时从中推送弹出窗口。 “完整”的解决方案类似于：

index.html

<html ng-app="app">
...
<div ng-controller="myController">

  <button ng-click="setCurrentView('tem1')">Template 1</button>
  <button ng-click="setCurrentView('tem2')">Template 2</button>
  <button ng-click="setCurrentView('tem3')">Template 3</button>

  <div ng-include="tem1.html" ng-show="currentView==tem1"></div>
  <div ng-include="tem2.html" ng-show="currentView==tem2"></div>
  <div ng-include="tem3.html" ng-show="currentView==tem3"></div>

  <button ng-click="goBack()">Back</button>

</div>
...
</html>

app.js

angular.module('app',[]).controller('myController',['$scope',function($scope){
  $scope.currentView='tem1';
  var history=[];

  $scope.setCurrentView=function(view){
    history.push($scope.currentView);        
    $scope.currentView=view;
  }

  $scope.goBack=function(){
    $scope.currentView=history.pop();
  }
}]);

【讨论】：

这真的很有帮助，如果我有更多的代表，我会投票赞成。谢谢。

【解决方案2】：

我建议使用 ng-include。这允许您包含来自另一个位置的大量 html 代码。然后，您可以使用 ng-show/hide 显示所需的片段或 ng-if 如果您希望在不需要时将其排除在 dom 之外

【讨论】：

这正是我要找的，非常感谢！