javascript - 使用设置为 ng-click 的变量来更改模板

Question

假设我有一个链接列表，我希望每个链接都更改当前页面上的 DOM使用 ng-click 和模板，我该怎么做？

编辑:我想我想要理解的是如何将尽可能多的逻辑从 .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

Answer 1

我不确定 <active> 的实现是什么，但您可以使用 ng-include实现您的期望

<active ng-include='active'></active>

现在创建一个客户端或服务器端模板，其名称与变量 active 匹配在范围上定义并加载相应的模板

模板定义可能类似于

<script type="text/ng-template"  id="foo1">
    <!-- html template for foo here-->
</script>

参见ng-include文档。