Question

下面是我在结束body标签上方的前两个声明。

此订单在物料下拉列表的页面上产生正确的结果。但是，我需要交换两个脚本标签的顺序才能使其与我的数据表页面一起工作，该页面与该页面是一个单独的页面。如果我在页面请求之前不进行交换，则一页可以工作，另一页会中断，无法加载/或生成正确的渲染输出。

我也在使用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>

编辑

重新排列脚本标签可解决数据表页面，但会破坏材料选择下拉页面。

   <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>

找不到指令'mdOption'所需的
控制器'mdSelectMenu'！

材料选择下拉页面

<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>

自定义Angualr JS /材质/数据表应用程序-所需的脚本加载顺序取决于页面

1 个答案: