自定义 Angular JS / Material / Datatables 应用程序 - 所需的脚本加载顺序取决于页面

Question

以下是我对上述结束正文标记的前两个声明。

此顺序在页面 material 下拉菜单中产生正确的结果。但是，我需要交换两个脚本标签的顺序，以使其与我的数据表页面一起使用，该页面与该页面是一个单独的页面。如果我在页面请求之前不交换，一个页面工作，另一个中断，不加载/或产生正确的渲染输出。

我也在使用 ocLazyLoad 加载我的非静态脚本（对应于链接到我页面的模板的控制器）

这是怎么回事？如何解决此加载顺序页面依赖性问题？

这些脚本是有序的，但它们的顺序取决于页面才能正常运行

<script src="/app/js/angularjs-1.6.6/angular.min.js"></script>
<script src="/app/js/jquery-slim-3.2.1/jquery-3.2.1.slim.min.js"></scrip

这些遵循但不依赖于页面，它们是可以接受的

<script src="/app/js/angular-material-1.1.12/angular-material.min.js"></script>
<script src="/app/js/jquery-datatables-1.10.19/jquery.dataTables.min.js" ></script>
<script src="/app/js/datatables-fixedheader-3.1.5/dataTables.fixedHeader.min.js"></script>
<script src="/app/js/angular-datatables-0.6.2/angular-datatables.min.js"></script>
<script src="/app/js/angular-datatables-0.6.2/plugins/fixedheader/angular-datatables.fixedheader.min.js"></script>
<script src="/app/js/angular-datatables-0.6.2/plugins/scroller/angular-datatables.scroller.min.js"></script>

编辑

重新排列脚本标签解决了数据表页面，但破坏了 material select 下拉页面。

   <script src="/app/js/jquery-slim-3.2.1/jquery-3.2.1.slim.min.js"></script>
   <script src="/app/js/angularjs-1.6.6/angular.min.js"></script>
   <script src="/app/js/angular-material-1.1.12/angular-material.min.js"></script>
   <script src="/app/js/jquery-datatables-1.10.19/jquery.dataTables.min.js" ></script>
   <script src="/app/js/angular-datatables-0.6.2/angular-datatables.js"></script>
   <script src="/app/js/datatables-fixedheader-3.1.5/dataTables.fixedHeader.min.js"></script>
   <script src="/app/js/angular-datatables-0.6.2/plugins/fixedheader/angular-datatables.fixedheader.min.js"></script>
   <script src="/app/js/angular-datatables-0.6.2/plugins/scroller/angular-datatables.scroller.min.js"></script>11
   <script src="/app/js/popper-1.12.9/popper.min.js"></script>
   <script src="/app/js/bootstrap-4.0.0/bootstrap.min.js"></script>
   <script src="/app/js/angularjs-1.6.6/angular-route.min.js"></script>
   <script src="/app/js/angularjs-1.6.6/angular-ui-router.js"></script>
   <script src="/app/js/angularjs-1.6.6/statehelper.js"></script>
   <script src="/app/js/angularjs-1.6.6/angular-resource.js"></script>
   <script src="/app/js/angularjs-1.6.6/angular-aria.js"></script>
   <script src="/app/js/angularjs-1.6.6/angular-animate.js"></script>
   <script src="/app/js/angularjs-1.6.6/angular-messages.js"></script>
   <script src="/app/js/ocLazyLoad/ocLazyLoad.js"></script>
   <script src="/app/route-config.js"></script> 
   <script src="/app/app.js"></script>

Controller 'mdSelectMenu', required by directive 'mdOption', can't be found!

Material Select 下拉页面

<md-content ng-controller="CreateActionController" ng-init="init()" ng-app="Action" layout-padding="" ng-cloak="">
<div layout-gt-xs="row">
    <div flex-gt-xs>
      <md-select placeholder="Assign to user" ng-model="users"  style="min-width: 200px;"/>
        <md-option ng-model="user" ng-value="user" ng-repeat="user in users track by user.userid">{{user.name}}</md-option>
      </md-select>
    </div>
    <div flex-gt-xs>
      <h6>Opening the calendar when the input is focused</h6>
      <md-datepicker ng-model="myDate" md-min-date="minDate" md-placeholder="Enter date" md-open-on-focus></md-datepicker>
    </div>
</div>
</md-content>

Answer 1

稍微修改我的 select 元素和属性值会产生与我的数据表页面（另一页）一起工作的下拉菜单。

模板

<md-content ng-controller="CreateActionController" ng-init="init()" layout-padding="" ng-cloak="">
    <div flex-gt-xs>
        <md-input-container>
          <label>Assignor</label>
          <md-select ng-model="user" style="min-width: 200px;">
            <md-option ng-repeat="user in users track by user.userid" ng-value="user.name">
              {{user.name}}
            </md-option>
          </md-select>
        </md-input-container>
    </div>
    <div flex-gt-xs>
      <h6>Opening the calendar when the input is focused</h6>
      <md-datepicker ng-model="myDate" md-min-date="minDate" md-placeholder="Enter date" md-open-on-focus></md-datepicker>
    </div>
</md-content>

index.html

中的脚本标签

       <script src="/app/js/jquery-slim-3.2.1/jquery-3.2.1.slim.min.js"></script>
       <script src="/app/js/angularjs-1.6.6/angular.min.js"></script>
       <script src="/app/js/angularjs-1.6.6/angular-resource.js"></script>
       <script src="/app/js/angularjs-1.6.6/angular-aria.js"></script>
       <script src="/app/js/angularjs-1.6.6/angular-animate.js"></script>
       <script src="/app/js/angularjs-1.6.6/angular-messages.js"></script>
       <script src="/app/js/angular-material-1.1.12/angular-material.min.js"></script>
       <script src="/app/js/jquery-datatables-1.10.19/jquery.dataTables.min.js" ></script>
       <script src="/app/js/angular-datatables-0.6.2/angular-datatables.js"></script>
       <script src="/app/js/datatables-fixedheader-3.1.5/dataTables.fixedHeader.min.js"></script>
       <script src="/app/js/angular-datatables-0.6.2/plugins/fixedheader/angular-datatables.fixedheader.min.js"></script>
       <script src="/app/js/angular-datatables-0.6.2/plugins/scroller/angular-datatables.scroller.min.js"></script>
       <script src="/app/js/popper-1.12.9/popper.min.js"></script>
       <script src="/app/js/bootstrap-4.0.0/bootstrap.min.js"></script>
       <script src="/app/js/angularjs-1.6.6/angular-route.min.js"></script>
       <script src="/app/js/angularjs-1.6.6/angular-ui-router.js"></script>
       <script src="/app/js/angularjs-1.6.6/statehelper.js"></script>
       <script src="/app/js/ocLazyLoad/ocLazyLoad.js"></script>
       <script src="/app/route-config.js"></script> 
       <script src="/app/app.js"></script>

自定义 Angular JS / Material / Datatables 应用程序 - 所需的脚本加载顺序取决于页面

Custom Angualr JS / Material / Datatables app - Required script load order dependent of page

javascript

angularjs

angularjs-material