Пользовательское приложение Angualr JS / Material / Datatables - требуемый порядок загрузки скрипта в зависимости от страницы - PullRequest
Новая
       9

Пользовательское приложение Angualr JS / Material / Datatables - требуемый порядок загрузки скрипта в зависимости от страницы

0 голосов
/ 24 апреля 2019

Ниже приведены мои два верхних объявления над закрывающим тегом 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>

EDIT

Перестановка тегов сценария разрешает страницу datatables, но разрывает раскрывающуюся страницу выбора материала. 

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

Контроллер 'mdSelectMenu', требуемый директивой 'mdOption', не найден!

Раскрывающаяся страница выбора материала 

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

1 Ответ

0 голосов
/ 25 апреля 2019

Небольшое изменение значений элементов 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>
...