Angularjs:两个视图,相同的控制器 - 共享范围

时间:2014-05-12 15:41:56

标签: javascript angularjs

如何使用路由加载/更新多个视图/模板?根据我的阅读,不可能使用角度路由同时加载多个部分。那么你如何管理呢?如果应用程序比博客稍微复杂一点,那么当路由发生变化时,您希望在同一时间更改几个位置。

这是html样本:

<!DOCTYPE html>

<html>
  <body ng-app='Basal' ng-controller="MainCtrl">
    <header>
      <div>
        <nav id='main-menu'>
          <ul>
            <li ng-click="menuItem('tables')"> Tables </li>
          .....
        </nav>
      </div>
      <div id='context-menu' ng-include="contextMenu"> </div>
    </header>

    <main ng-view></main>

  </body>
</html> 

因此,我需要通过标题中的ng-view通过ng-include和此应用的子菜单加载主应用。 不确定这是否是正确的方法,但它可以工作,并允许我同时加载许多模板。 我将使用主菜单中的一个函数加载应用程序,如<li ng-click="menuItem('tables')"> Tables </li>,然后将其传递到主控制器中的switch。像这样:

  $scope.contextMenu = '';
  $scope.menuItem = function (i) {
      switch (i) {
          case 'tables':
              $location.path('/tables');
              $scope.contextMenu = '/views/tables/tables-menu.html';
              break;
          default:
              .....
      }
  }

请告诉我这是否可以接受,因为这可能是导致我出问题的原因。

现在,两个模板都设置在同一个控制器下。 ng-view模板的控制器设置在when的{​​{1}}函数中,$routeProvider模板的控制器设置为ng-include,如下所示:

ng-controller

此模板只会加载应用程序的控制按钮。 两个视图都具有相同的控制器 - <div class='app-ctrl' id='tables-ctrl' ng-controller="TablesCtrl"> <nav class='app-menu'> <ul> <li ng-click="newTable()"> Create </li> <li ng-click="editTable()"> Edit </li> <li ng-click="delTable()"> Delete </li> <li ng-click="testTable()"> Test </li> </ul> </nav> <div><button class='search'>Search</button></div> </div>

TablesCtrl控制器中,我处理按钮点击。 例如

TablesCtrl

$scope.testTable = function() { $scope.test = "blah"; } 仅在我设置$scope.test指令的顶部模板中可见。为什么?如果两个模板都由同一个控制器管理,为什么我在一个模板中看到set变量而在另一个模板中看不到? 如何在一个模板中创建按钮来处理另一个模块中的范围。我认为将两个视图放在同一个控制器下可以做到,但它却没有。我从文档中了解到两个视图具有单独的范围,但我认为相同的控制器会使其可访问。

如果我想在一个模板中加载按钮但是它们在另一个模板中生效和处理的数据,那么最好的方法是什么?

对不起,如果不清楚,但我正在努力解释我的困惑。我是Angular和JavaScript的新手。

感谢。

1 个答案:

答案 0 :(得分:1)

我强烈推荐模块ui-router。它轻松支持多个模板。查看multiple--named-views部分,它比使用ngRoute指令更灵活。