Question

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

编辑：我想我想要了解的是如何从.html文件中移除尽可能多的逻辑并进入我的app.js文件。我是JS和Angular的新手，不知道在哪里或如何通过“主动”来选择我想放在里面的东西例如：

<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>

活动元素仅显示将哪个模板设置为活动模板。即;显示与foo1关联的模板，然后如果单击foo2，foo2的模板将替换foo1

Answer 1

您可以使用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>

此外，如果你想保持active ='foo1'的逻辑，只需改变ng-show中的逻辑。通常，您希望将逻辑保留在视图之外，因此请将其移至控制器。

Answer 2

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

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

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

模板定义可能类似于

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

请参阅ng-include文档。

使用变量设置为ng-click以更改模板

2 个答案: