1

我的 index.html 页面如下：

<div id="sidepanel" data-ng-controller="ListCtrl">
    <li data-ng-repeat="record in records">
    {{record.id}}
    <input type="checkbox" data-ng-model="addwidget">
    </li>
</div>
<div id="main">
    <div data-ng-view></div>
</div>

对于这个 data-ng-view 我有另一个页面 recordlist.html 我有以下代码：

<div data-ng-controller="ListCtrl">
    <ul class="design">
        <li data-ng-repeat="record in records"> 
           <div data-ng-switch data-on="record.category">
        <div data-ng-switch-when="reporting1">
             <div id="{{record.id}}" data-ng-show="addwidget">{{record.description}}</div> 
             </div>               
             <div data-ng-switch-when="reporting2">                
             <div id="{{record.id}}" data-ng-hide="addwidget">{{record.description}}</div>
             </div>
        </li>
    </ul>
</div>

我的问题是，当我选中复选框时，我想显示第一个 div，当我取消选中它时，我想显示第二个 div。当 data-ng-model 和 data-ng-hide/show 都在同一页面上时然后它工作正常，但在我的情况下，它出现在两个不同的页面上。

这是正确的吗 ？我该如何实现这一点。需要帮助。谢谢。

4

1 回答 1

3

问题是您addwidget在第一个控制器中进行设置，但试图在第二个控制器中使用它。控制器不是单例。

所以，在这种情况下：

<div id="sidepanel" data-ng-controller="ListCtrl">
  ...
</div>
<div id="main">
  <div data-ng-view>
    <div data-ng-controller="ListCtrl">
    </div>
  </div>
</div>

你有两个独立的控制器和范围。而你addwidget在第一个尝试阅读第二个。

您可以将其绑定到根范围$root.addwidget或使用服务共享到状态。

由于您有许多记录，因此直接绑定到 root 是一个问题，因为它们都将共享相同的状态。因此，您将需要 rootScope 中的一个对象并通过 id 绑定选项$root.addwidget[record.id]。在这里做了一个相当简化的修改。

于 2013-04-26T11:50:14.257 回答