Javascript Angularjs：两个视图，相同的控制器-共享范围_Javascript_Angularjs

Javascript Angularjs：两个视图，相同的控制器-共享范围

javascript angularjs

Javascript Angularjs：两个视图，相同的控制器-共享范围,javascript,angularjs,Javascript,Angularjs,如何使用路由加载/更新多个视图/模板？根据我的阅读，使用角度路由不可能同时加载多个部分。那么你是如何管理的呢？如果应用程序比博客稍微复杂一点，那么当路线改变时，您可能希望同时改变几个地方这是html示例： <!DOCTYPE html> <html> <body ng-app='Basal' ng-controller="MainCtrl"> <header> <div> <nav id

如何使用路由加载/更新多个视图/模板？根据我的阅读，使用角度路由不可能同时加载多个部分。那么你是如何管理的呢？如果应用程序比博客稍微复杂一点，那么当路线改变时，您可能希望同时改变几个地方

这是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视图

模板的控制器在

$routeProvider

的

功能中设置，而ng包含
模板的控制器设置为ng控制器
，如下所示：
<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>

$scope.test
仅在我设置ng click指令的顶部模板中可见。为什么？如果两个模板都由同一个控制器控制，为什么我在一个模板中看到set变量而在另一个模板中看不到？
如何使一个模板中的按钮处理另一个模板中的范围。我原以为将两个视图放在同一个控制器下就可以了，但显然不行。我从文档中了解到，两个视图具有不同的作用域，但我认为相同的控制器将使其可访问
如果我想在一个模板中加载按钮，但在另一个模板中加载按钮影响和处理的数据，那么最好的方法是什么
很抱歉，如果不清楚，但我正在努力解释我的困惑。我对Angular和JavaScript都是新手
谢谢。
我强烈推荐该模块。它很容易支持多个模板。查看该部分，它比使用ngRoute指令更灵活 Angular UI Router是您正在寻找的，特别是多个命名视图和嵌套路由。对于具有中到高复杂性ui的应用程序，路由器比角度路由更适合。
<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>

$scope.testTable = function() {  
    $scope.test = "blah";    
}