AngularJS: данные-нг-модель и данные нг скрыть/показать

Question

Моей 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> 

для этого данных-нг-зрений у меня есть еще одна страницы в 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.When как дата-нг-модели & data-ng-hide/show находятся на одной странице, тогда он отлично работает, но в моем случае он присутствует на двух разных p возрастов.

Верно ли это? Как я могу это реализовать. Нужна помощь. Спасибо.

Answer 1

Проблема в том, что вы устанавливаете 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 или использовать общий ресурс службы в состояниях.

Поскольку у вас много записей, привязка непосредственно к корню является проблемой, так как все они собираются использовать одно и то же состояние. Таким образом, вам понадобится объект в корневом каталоге и привязать его по id $root.addwidget[record.id]. Сделано довольно упрощенно modification here.