Angularjs - 在不更改URL的情况下更改模板

Question

new to Angular and JS so my jargon may be off. Angular和JS的新手，所以我的行话可能会关闭。

Within a certain section of a page I would like to load in different templates depending on the user clicks without changing the URL path. 在页面的某个部分中，我想根据用户点击加载不同的模板，而不更改URL路径。 I know how to use $routeProvider with ng-view but that requires a URL change to load the related template. 我知道如何将$ routeProvider与ng-view一起使用，但需要更改URL以加载相关模板。

I would also like to add a back link within this specific section so the user can travel back a step. 我还想在此特定部分中添加一个反向链接，以便用户可以返回一个步骤。

Any ideas? 有任何想法吗？ I couldn't find any questions similar to mine but I may be searching with the incorrect terms. 我找不到任何类似于我的问题，但我可能会用不正确的术语进行搜索。 Any help or suggestions are greatly appreciated. 非常感谢任何帮助或建议。

Regards 问候

Answer 1

And for the back button, you would have to keep a history array with past clicks/links and push pop from that as you click and click back. 对于后退按钮，您必须使用过去的点击/链接保留历史数组，并在单击并单击返回时从该按钮中弹出。 The "complete" solution would look similar to: “完整”解决方案看起来类似于：

index.html 的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 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();
  }
}]);

Answer 2

I'd suggest using ng-include. 我建议使用ng-include。 This allows you to include chunks of html code from another location. 这允许您从其他位置包含html代码块。 You could then use ng-show/hide to display the desired piece or ng-if if you would prefer that it is left out of the dom if not required 然后，您可以使用ng-show / hide显示所需的部分或ng - 如果您希望它不在dom中，如果不需要

Angularjs - 在不更改URL的情况下更改模板

问题描述

2 个解决方案

解决方案1
3 2014-09-11 11:50:11

解决方案2
0 已采纳 2014-09-11 11:10:01

Angularjs - 在不更改URL的情况下更改模板

问题描述

2 个解决方案

解决方案1 3 2014-09-11 11:50:11

解决方案2 0 已采纳 2014-09-11 11:10:01

解决方案1
3 2014-09-11 11:50:11

解决方案2
0 已采纳 2014-09-11 11:10:01