显示/隐藏 AngularJs 中的 Div

Question

这太奇怪了，我不知道为什么这个简单的方案不起作用。在使用jQuery和Backbone很长时间后，我还是相对较新于Angular。

以下是代码的基本结构...

<div class="span10" ng-controller="ClientCtrl" ng-hide="addClient">
  <button ng-click="addClient = true" class="btn btn-primary">
    Add new Client
  </button>
</div>
<div class="span10" ng-controller="ClientCtrl" ng-show="addClient">
  <div ng-include src="'views/partials/client.html'"></div>
</div>

预期行为是点击“添加新客户”按钮会显示第二个div。实际行为是第一个div被隐藏了（正常情况下），但第二个div仍然被隐藏。控制器中没有控制行为。

我已经尝试使用作用域函数，在控制器中设置初始属性以及其他许多方法，但都没有成功。我已经检查过它们是否在同一作用域中，这似乎不是问题所在。谢谢帮助，因为这让我感到疯狂。

- Brandon

---

当你说“保持隐藏”时，你是否检查了ng-include是否正常工作，或者相应的父级div是否确实保持隐藏状态？尝试在第二个div中放置一些静态代码，以查看是ng-include失败还是ng-show... - callmekatootie

是的，nginclude没问题。点击前：http://d.pr/i/VIye 点击后：http://d.pr/i/rSEP - Brandon

Answer 1

在这种情况下，AngularJS使用ng-controller属性映射了两个控制器，因此创建了两个单独的控制器。一个控制器中的作用域不会影响第二个控制器的作用域。

你需要像这样做：

<div ng-controller="ClientCtrl">
  <div class="span10" ng-hide="addClient">
    <button ng-click="addClient = true" class="btn btn-primary">
      Add new Client
    </button>
  </div>
  <div class="span10" ng-show="addClient">
    <div ng-include src="'views/partials/client.html'"></div>
  </div>
</div>

- Viral Patel

---

那就是答案！我应该意识到这一点，但从未尝试过。等SO允许后会接受这个答案。哦，谢谢你。 - Brandon

是的。控制器不像服务一样被 Angular 注入为共享实例（单例）。 - blaster

非常感谢您的回答。虽然已经过去了将近两年，但这个答案仍然很有参考价值。在找到这个答案之前，我花费了很多时间。AngularJS有时候真的让人非常沮丧！ - Unknown Coder