在同一页面上注入多个 Angular 模块/控制器答案

【问题标题】：Injecting Multiple Angular Modules/Controllers onto Same Page在同一页面上注入多个 Angular 模块/控制器
【发布时间】：2016-10-17 03:51:14
【问题描述】：

我正在尝试将一个新的角度控制器注入到一个下拉菜单中，该下拉菜单位于一个主要由另一个模块和控制器填充的视图中。到目前为止它不起作用，我不知道为什么，必然。我没有使用路由或类似的东西，纯粹调用 html 中的控制器和模块。我不太确定还能去哪里看。目前，我将 ng-app 注入到 div 包装器中，具有不同的位置。但是，这不允许角度控制器和模块协同工作这是我的代码的 sn-p：

<div ng-show="showme=='4'">
<body>
<div ng-app="app">
  <div class="container">
    <div ng-controller="ClientCtrl">
      <div class="datagrid">
        <table>
          <thead>
            <tr>
              <th> Checks/Offers Received </th>
              <th> Disbursement </th>
              <th> Client Ins Settled Amount </th>
              <th> Case Fee Percentage</th>
            </tr>
          </thead>
        </table>
      </div>
    </div>
  </div>
</div>
</body>
<body>
<div ng-app="offer">
  <div class="container">
    <div ng-controller="OfferCtrl">
      <div class="datagrid">
        <table>
          <tbody>
            <td>
              <div class="dropdown">
                <button class="dropbtn">Offers</button>
                <div class="dropdown-content">
                  <li ng-repeat="offer in offers | filter:{clientid:clientId}">
                    <input type="text" value="{{offer.offeramnt}}" />
                    <a href="#">Offer 2</a>
                    <a href="#">Offer 3</a>
                  </li>
                </div>
              </div>
            </td>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
</body>
<body>
<div ng-app="check">
  <div class="container">
    <div ng-controller="CheckCtrl">
      <div class="datagrid">
        <table>
          <tbody>
            <td>
              <div class="dropdown">
                <button class="dropbtn">Checks</button>
                <div class="dropdown-content">
                  <li ng-repeat="check in checks | filter:{clientid:clientId}">
                    <input type="text" value="{{check.checkamount}}" />
                    <a href="#">Check 2</a>
                    <a href="#">Check 3</a>
                  </li>
                </div>
              </div>
            </td>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
</body>
<body>
<div ng-app="app">
  <div class="container">
    <div ng-controller="ClientCtrl">
      <div class="datagrid">
        <table>
          <tbody>
            <tr>
              <td>
                <input type="string" value=" {{client.checksreceived}}" />
              </td>
              <td>
                <input type="text" value="{{client.clientinssettlesamnt}}" />
              </td>
              <td>
                <input type="number" value="{{client.casefeepercent}}" />
              </td>
            </tr>
          </tbody>
          <thead>
            <tr>
              <th> Adverse Settle Amount </th>
              <th> Case cost </th>
              <th> Line Item Fees</th>
              <th> Loan Information </th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="client in clients | orderBy:'id' | filter:{id:clientId} | limitTo: 1 track by $index" ">
       <td>
        <input type="numer" value=" {{client.advsettleamnt}}"/>
       </td>
       <td>
        <input type="number "  value="{{client.Casecost}} "/>
       </td>
       <td>
        <input type="number "  value="{{client.lineitemfees}} "/>
       </td>
       <td>
        <input type="text "  value="{{client.bdf}} "/>
       </td>
       </tr>
     </tbody>
    </table>
   <button type="submit " ng-click="updateClient() "><strong>Update</strong></button>
 <a class="btn btn-primary " href="/intakeoffer/{{clientId}} ">
 <strong>Add Offer</strong>
 </a>
 <a class="btn btn-primary " href="/intakecheck/{{clientId}} ">
 <strong>Add check</strong>
 </a>
 </div>
 </div>
 </div>

【问题讨论】：

您是否在控制台中遇到错误？
请提供更多信息，您的视图控制器也会很好。
没有，但是当我查看它时，数据不会代表报价和检查部分显示

标签： javascript html angularjs web

【解决方案1】：

在 Angular 文档 here 中，您可以阅读：

每个 HTML 文档只能自动引导一个 AngularJS 应用程序。在文档中找到的第一个 ngApp 将用于定义根元素以自动引导为应用程序。要在 HTML 文档中运行多个应用程序，您必须使用 angular.bootstrap 手动引导它们。

所以像你计划的那样引导是行不通的。此外，多个具有相同名称的 ng-app 将不起作用，并且 ng-show（没有控制器和没有应用程序 - 不在您的标记中）不起作用，因为不支持嵌套 ng-app。

手动引导语法如下：

angular.element(document).ready(function() {
    angular.bootstrap(document, ['app']);
});

我不会像这样构建我的应用程序。只需创建一个应用模块，在其中添加其他模块作为依赖项。

例如angular.module('app', ['order'])

我还建议阅读一些 AngularJs 入门教程。例如PhoneCat tutorial。

【讨论】：

这两个app模块实例属于同一个模块，但是我在中间休息了注入另外两个模块，“offer”和“checks”。但是，在 app 模块中，我可以将其他模块声明为依赖项并仍然将它们调用到同一个 HTML 文档中吗？
我正在尝试实现这样的目标：angularjshub.com/examples/basics/multiplecontrollers。我看到他们只在 body wrapper 中调用 ng-app 一次。我以为如果不指定要使用的模块，它就不会用不同的模块实例化多个控制器？
您可以将多个依赖项添加到您的根应用程序中，并在 html 标记处使用这些模块中的控制器，就像在多控制器示例中一样。无需引导依赖模块。