Search code examples
javascriptangularjsangularjs-material

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

Below are my top two declarations on above closing body tag.

This order produces correct results on a page a material dropdown. But, I need to swap order of the two script tags to make it work with my datatables page, which is a separate page from this page. If I dont swap before page request, one page works, the other breaks, does not load / or produce proper rendered output.

I am using also ocLazyLoad to load my non static scripts (controllers corresponding to the template linked to my page)

What is going on? How do I resolve this load order page dependency?

These script are ordered but their order is page dependent to function correctly

<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

These follow but are not page dependent, they are acceptable as is

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

EDIT

Rearranging the script tags resolved the datatables page, but breaks the material select drop down page.

   <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 Drop Down Page

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

  • Modifying my select element and attribute values slightly produced the dropdown working in conjunction my datatables page (another page).

    Template

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

    Script Tags in 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>