2

我有一个应用程序，其中侧边栏将显示待办事项消息列表和已处理消息列表（使用选项卡导航），单击它将在侧边栏右侧的主要部分显示消息的详细信息。右边的视图有一些表单输入，用户填写消息的详细信息，按下按钮，消息从待办事项移动到已处理。

  <div id="sidebar" data-ng-controller="MessageController">
    <ul class="nav nav-tabs" id="message-tab">
      <li><a href="#to-do" data-toggle="tab">To-do</a></li>
      <li><a href="#processed" data-toggle="tab">Processed</a></li>
    </ul>

    <div class="tab-content">
      <div class="tab-pane" id="to-do">
        <table class="table table-hover">
            <tr data-ng-repeat="message in todoMessages | orderBy: id">
              <td>
                  <a href="#/todo/{{message.id}}" class=""><span>{{message.name}}  </span></a> <small style="float:right;">{{message.type}}</small>
              </td>
            </tr>

       </table>

      </div>
      <div class="tab-pane" id="processed">
        <table class="table table-hover">

            <tr data-ng-repeat="message in processedMessages | orderBy: id">
              <td>
                <a href="#/processed/{{message.id}}" class=""><span>{{message.name}}  </span></a> <small style="float:right;">{{message.type}}</small>
              </td>
            </tr> 

       </table>

      </div>
    </div>
  </div>

  <div id="main-panel">
    <div class="message-preview " data-ng-view="">
    </div>            
  </div>

我遇到的问题是右侧的主要部分使用 ng-view 和 $routeProvider 在 URL 哈希更改时提供模板。当试图更新模板视图中的 $scope 对象时，侧边栏的列表不会更新。

应用程序.js

var app = angular.module('messageApp', []);

app.config(function ($routeProvider) {
$routeProvider
    .when('/todo/:messageId',
                    {
            controller: 'MessageController',
            templateUrl: 'app/partials/todoView.html'
                    })
     .when('/processed/:messageId',
                    {
            controller: 'MessageController',
            templateUrl: 'app/partials/processedView.html'
                    })
    .otherwise({ redirectTo: '/' });
});

但是，如果我将侧边栏中的相同标记放入模板视图中，双向绑定可以正常工作，因为我可以看到在操作范围对象时列表会更新。

我做错了什么，如何正确使用 ng-controller 更新侧边栏？

4

0 回答 0