Скрипты JSS не работают в пользовательском интерфейсе AngularJS - PullRequest
0 голосов
/ 23 января 2019

У меня есть веб-приложение на основе angularJS , сгенерированное Jhipster . При интеграции темы в это приложение возникает проблема, связанная с тем, что все компоненты этой темы прекрасно работают в Index.html , но при наличии вложенного просмотра пользовательского интерфейса некоторые сценарии не работают должным образом, например, раскрывающиеся списки, карусели.

Если я вставил весь свой код в файл Index.html. Это работает совершенно нормально, не там UI-View.

<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Title</title>
    <meta name="description" content="">
    <meta name="google" value="notranslate">
    <meta name="theme-color" content="#000000">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <!-- build:css content/css/vendor.css -->
    <!-- bower:css -->
    <link rel="stylesheet" href="bower_components/angular-loading-bar/build/loading-bar.css">
    <!-- endinject -->
    <!-- endbuild -->
    <!-- build:css content/css/main.css -->
  
    <link href="//fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">

    <!-- CSS Implementing Plugins -->
    <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="app/space/vendor/hs-megamenu/src/hs.megamenu.css">
    <link rel="stylesheet" href="app/space/vendor/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css">
    <link rel="stylesheet" href="app/space/vendor/custombox/dist/custombox.min.css">
    <link rel="stylesheet" href="app/space/vendor/animate.css/animate.min.css">
    <link rel="stylesheet" href="app/space/vendor/slick-carousel/slick/slick.css">
    <link rel="stylesheet" href="app/space/vendor/dzsparallaxer/dzsparallaxer.css">
    <link rel="stylesheet" href="app/space/vendor/cubeportfolio/css/cubeportfolio.min.css">

    <!--&lt;!&ndash; CSS Space Template &ndash;&gt;-->
    <link rel="stylesheet" href="app/space/css/theme.css">
    <!-- endbuild -->
    <link rel="shortcut icon" href="favicon.ico" />
    <link rel="manifest" href="manifest.webapp" />
</head>
<body ng-app="myApp" ng-strict-di>

<div ui-view="content"></div>

 <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="app/space/vendor/bootstrap/bootstrap.min.js"></script>

    <script src="bower_components/messageformat/messageformat.js"></script>
    <script src="bower_components/json3/lib/json3.js"></script>
    <script src="bower_components/sockjs-client/dist/sockjs.js"></script>
    <script src="bower_components/stomp-websocket/lib/stomp.min.js"></script>
    <script src="bower_components/popper.js/dist/umd/popper.js"></script>
    <script src="bower_components/clipboard/dist/clipboard.js"></script>
    <script src="bower_components/js-cookie/src/js.cookie.js"></script>
    <script src="bower_components/chart.js/dist/Chart.js"></script>
    <script src="bower_components/bootstrap-rating/bootstrap-rating.js"></script>
    <script src="bower_components/select2/dist/js/select2.js"></script>
    <script src="bower_components/blockUI/jquery.blockUI.js"></script>
    <script src="bower_components/jquery-mockjax/dist/jquery.mockjax.js"></script>
    <script src="bower_components/install/detect-zoom.js"></script>
    <script src="bower_components/jquery-mask-plugin/dist/jquery.mask.js"></script>
    <script src="bower_components/autosize/dist/autosize.js"></script>
    <script src="bower_components/jquery-validation/dist/jquery.validate.js"></script>
    <script src="bower_components/jquery-ui/jquery-ui.js"></script>
    <script src="bower_components/moment/moment.js"></script>
    <script src="bower_components/gmaps/gmaps.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-aria/angular-aria.js"></script>
    <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
    <script src="bower_components/angular-cache-buster/angular-cache-buster.js"></script>
    <script src="bower_components/angular-cookies/angular-cookies.js"></script>
    <script src="bower_components/angular-dynamic-locale/src/tmhDynamicLocale.js"></script>
    <script src="bower_components/ngstorage/ngStorage.js"></script>
    <script src="bower_components/angular-loading-bar/build/loading-bar.js"></script>
    <script src="bower_components/angular-resource/angular-resource.js"></script>
    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
    <script src="bower_components/angular-translate/angular-translate.js"></script>
    <script src="bower_components/angular-translate-interpolation-messageformat/angular-translate-interpolation-messageformat.js"></script>
    <script src="bower_components/angular-translate-loader-partial/angular-translate-loader-partial.js"></script>
    <script src="bower_components/angular-translate-storage-cookie/angular-translate-storage-cookie.js"></script>
    <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
    <script src="bower_components/bootstrap-ui-datetime-picker/dist/datetime-picker.js"></script>
    <script src="bower_components/ng-file-upload/ng-file-upload.js"></script>
    <script src="bower_components/ngInfiniteScroll/build/ng-infinite-scroll.js"></script>
    <script src="bower_components/ngclipboard/dist/ngclipboard.js"></script>
    <!-- endinject -->
    <!-- endbuild -->

    <!-- build:js app/app.js  -->
    <!-- inject:js -->
    <script src="app/app.module.js"></script>
    <script src="app/space/vendor/jquery-migrate/dist/jquery-migrate.min.js"></script>
    <script src="app/space/vendor/popper.js/dist/umd/popper.min.js"></script>
    <script src="app/space/vendor/jquery.countdown.min.js"></script>
    <script src="app/space/vendor/hs-megamenu/src/hs.megamenu.js"></script>
    <script src="app/space/vendor/jquery-validation/dist/jquery.validate.min.js"></script>
    <script src="app/space/vendor/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js"></script>
    <script src="app/space/vendor/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.js"></script>
    <script src="app/space/vendor/custombox/dist/custombox.min.js"></script>
    <script src="app/space/vendor/custombox/dist/custombox.legacy.min.js"></script>
    <script src="app/space/vendor/custombox/dist/custombox.js"></script>
    <script src="app/space/vendor/slick-carousel/slick/slick.js"></script>
    <script src="app/space/vendor/slick-carousel/slick/slick.min.js"></script>
    <script src="app/space/vendor/dzsparallaxer/dzsprx_module_parallax_features.js"></script>
    <script src="app/space/vendor/dzsparallaxer/dzsparallaxer.js"></script>
    <script src="app/space/vendor/dzsparallaxer/dzsparallaxer.dev.js"></script>
    <script src="app/space/vendor/cubeportfolio/js/jquery.cubeportfolio.min.js"></script>
    <script src="app/space/vendor/cubeportfolio/js/jquery.cubeportfolio.js"></script>
    <script src="app/space/vendor/cubeportfolio/documentation/js/prettify.js"></script>
    <script src="app/space/vendor/cubeportfolio/documentation/js/main.js"></script>
    <script src="app/space/vendor/player.js/dist/player.min.js"></script>
    <script src="app/space/vendor/appear.js"></script>
    <script src="app/space/js/theme-custom.js"></script>
    <script src="app/space/js/hs.core.js"></script>
    <script src="app/space/js/helpers/hs.focus-state.js"></script>
    <script src="app/space/js/helpers/hs.bg-video.js"></script>
    <script src="app/space/js/components/hs.video-player.js"></script>
    <script src="app/space/js/components/hs.validation.js"></script>
    <script src="app/space/js/components/hs.unfold.js"></script>
    <script src="app/space/js/components/hs.sticky-block.js"></script>
    <script src="app/space/js/components/hs.step-form.js"></script>
    <script src="app/space/js/components/hs.slick-carousel.js"></script>
    <script src="app/space/js/components/hs.show-animation.js"></script>
    <script src="app/space/js/components/hs.scroll-nav.js"></script>
    <script src="app/space/js/components/hs.quantity-counter.js"></script>
    <script src="app/space/js/components/hs.progress-bar.js"></script>
    <script src="app/space/js/components/hs.onscroll-animation.js"></script>
    <script src="app/space/js/components/hs.modal-window.js"></script>
    <script src="app/space/js/components/hs.malihu-scrollbar.js"></script>
    <script src="app/space/js/components/hs.instagram.js"></script>
    <script src="app/space/js/components/hs.header.js"></script>
    <script src="app/space/js/components/hs.go-to.js"></script>
    <script src="app/space/js/components/hs.g-map.js"></script>
    <script src="app/space/js/components/hs.fancybox.js"></script>
    <script src="app/space/js/components/hs.cubeportfolio.js"></script>
    <script src="app/space/js/components/hs.counter.js"></script>
    <script src="app/space/js/components/hs.countdown.js"></script>
    </body>
</html>
`bower.json
{
  "version": "0.0.0",
  "name": "my-app",
  "appPath": "src/main/webapp/",
  "testPath": "src/test/javascript/spec",
  "dependencies": {
    "angular": "1.5.8",
    "angular-aria": "1.5.8",
     "angular-bootstrap": "1.3.3",
     "angular-cache-buster": "0.4.3",
     "angular-cookies": "1.5.8",
     "angular-dynamic-locale": "0.1.32",
     "angular-i18n": "1.5.8",
     "ngstorage": "0.3.10",
     "angular-loading-bar": "0.9.0",
     "angular-resource": "1.5.8",
     "angular-sanitize": "1.5.8",
     "angular-translate": "2.11.1",
     "angular-translate-interpolation-messageformat": "2.11.1",
     "angular-translate-loader-partial": "2.11.1",
     "angular-translate-storage-cookie": "2.11.1",
     "angular-ui-router": "0.3.1",
     "bootstrap-ui-datetime-picker": "2.4.3",
     "json3": "3.3.2",
     "messageformat": "0.3.1",
     "ng-file-upload": "12.0.4",
     "ngInfiniteScroll": "1.3.0",
     "sockjs-client": "1.1.1",
     "stomp-websocket": "2.3.4",
     "swagger-ui": "2.1.5",
     "popper.js": "^1.14.6",
     "ngclipboard": "^2.0.0",
     "js-cookie": "^2.2.0",
     "jquery": "^3.3.1",
     "font-awesome": "4",
     "modernizr": "^3.5.0",
     "chart.js": "^2.7.1",
     "bootstrap-rating": "^1.5.0",
     "nestable": "*",
     "select2": "^4.0.5",
     "blockUI": "blockui#*",
     "jquery-mockjax": "^2.2.1",
     "install": "^1.0.4",
     "jquery-mask-plugin": "^1.14.13",
     "autosize": "^4.0.0",
     "ckeditor-dev": "^4.8.0",
     "jquery-validation": "^1.17.0",
     "jQuery-Smart-Wizard": "^3.3.1",
     "jquery-ui": "^1.12.1",
     "moment": "^2.20.1",
     "gmaps": "^0.4.25",
     "echarts": "^4.0.4"
   },
   "devDependencies": {
      "angular-mocks": "1.5.8"
   },
   "overrides": {
      "angular": {
        "dependencies": {
          "jquery": "3.3.1"
        }
       },
      "angular-cache-buster": {
        "dependencies": {
          "angular": "1.5.8"
        }
       },
     "angular-dynamic-locale": {
       "dependencies": {
         "angular": "1.5.8"
        }
     }
   },
   "resolutions": {
      "angular": "1.5.8",
      "angular-bootstrap": "2.0.0",
      "jquery": "3.1.0"
    }
 }`
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...