Javascript 使用设置为ng的变量单击以更改模板

假设我有一个链接列表，我希望每个链接都能更改当前页面上的DOM 使用ng单击和模板，我将如何做到这一点

编辑：我想我想了解的是如何将尽可能多的逻辑从.html文件转移到app.js文件中。我对JS和Angular有点陌生，不知道在哪里或如何通过“active”来选择我想放在里面的内容 例如：

<ul>
  <li>
    <a href="#" ng-click="active='foo1'"><h1>foo1</h1></a>
  </li>
  <li>
    <a href="#" ng-click="active='foo2'"><h1>foo2</h1></a>
  </li>
  <li>
    <a href="#" ng-click="active='foo3'"><h1>foo3</h1></a>
  </li>
</ul>  

<active></active>

其中，活动图元仅显示设置为活动图元的模板。

---

ie；将显示与foo1关联的模板，然后如果单击foo2，则foo2的模板将替换foo1，您可以使用ng show/ng hide。基本上是这样的

<div ng-show="foo1">
  <p> This will only show when foo1 is true on your scope.
</div>

<div ng-show="foo2">
  <p> This will only show when foo2 is true on your scope.
</div>

<div ng-show="foo3">
  <p> This will only show when foo3 is true on your scope.
</div>

仅当foo1在您的作用域上为true时，才会显示此选项。
只有当foo2在您的作用域上为true时，才会显示此选项。
仅当foo3在您的作用域上为true时，才会显示此选项。

---

另外，如果您想保持active='foo1'的逻辑，只需在ng show中更改逻辑即可。通常，您希望将逻辑排除在视图之外，因此将其移动到控制器。

我不确定

文档的实现是什么。
我想我试图理解的是如何尽可能多地移动到控制器。我对js和angular有点陌生，不知道如何或在哪里传递active。谢谢，这正是我想要的。我过去只是描述性的，但可能没有什么帮助。很抱歉
<script type="text/ng-template"  id="foo1">
    <!-- html template for foo here-->
</script>