显示隐藏Div AngularJs

时间:2013-06-28 14:47:20

标签: angularjs

这很奇怪,我不知道为什么这个简单的场景不起作用。在使用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保持隐藏状态。控制器中没有控制行为。

我已经尝试了一个范围功能,在控制器的属性中设置初始值以及其他许多没有运气的东西。我究竟做错了什么?我已经检查过以确保它们在相同的范围内并且“似乎”不是问题所在。感谢您的帮助,因为这让我发疯。

1 个答案:

答案 0 :(得分:12)

在这种情况下,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>