Скрипт jQuery не удерживается, когда я меняю представления / шаблоны с помощью Angular's ngRoute - PullRequest
Новая
       21

Скрипт jQuery не удерживается, когда я меняю представления / шаблоны с помощью Angular's ngRoute

0 голосов
/ 10 мая 2018

Меня заставляют строить СПА своеобразным способом. У клиента есть только статический файловый сервер, поэтому я не могу использовать вызовы AJAX.

Я использую возможность Angular для создания встроенного шаблона, и он работает хорошо. Однако скрипт JQuery, который у меня есть, не работает после возврата на страницу индекса. На данный момент все, что я делаю, это использую JQuery для изменения CSS изображений. Он не работает, когда вы возвращаете индекс, если вы не обновите. Я обеспокоен тем, что это по-прежнему будет проблемой, так как я создаю отдельные шаблоны и нуждаюсь в элементах, которые будут стилизованы или анимированы по-другому.

Вот код (IMGS - это заполнители, VioeoJS находится на плите котла для будущего использования):

HTML 

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link href="http://vjs.zencdn.net/6.8.0/video-js.css" rel="stylesheet">
    <script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
    <link rel ="stylesheet" href ="CSS/custom.css" type = "text/css">
    <title>Know Your Risk</title>
  </head>



  <body ng-app="WXRisk">

    <div ng-view></div>



    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js"></script>
    <script src = "JS/custom2.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src = "JS/custom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="http://vjs.zencdn.net/6.8.0/video.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

AngularJS 

 var app = angular.module("WXRisk" , ["ngRoute", "ngAnimate"]);
    app.config(function($routeProvider){
      $routeProvider
      .when ("/", {
        template : "<div class = 'container'><div class ='row'><div class = 'col-xl-6'><a href = '#!Chatham'><img src='http://www.dishuser.com/TVMarkets/City%20Maps/Savannah.gif' class='img-fluid wx' alt=''></a></div><div class = 'col-xl-6'><img src='http://www.dishuser.com/TVMarkets/City%20Maps/Savannah.gif' class='img-fluid wx' alt=''></div></div><div class = 'row'><div class = 'col-xl-6'><img src='http://www.dishuser.com/TVMarkets/City%20Maps/Savannah.gif' class='img-fluid wx' alt=''></div><div class = 'col-xl-6'><img src='http://www.dishuser.com/TVMarkets/City%20Maps/Savannah.gif' class='img-fluid wx' alt=''></div></div></div>"
      })

      .otherwise({
        template : "<div class = 'container'><div class ='row'><div class = 'col-xl-6'><a href = '#!Chatham'><img src='http://www.dishuser.com/TVMarkets/City%20Maps/Savannah.gif' class='img-fluid wx' alt=''></a></div><div class = 'col-xl-6'><img src='http://www.dishuser.com/TVMarkets/City%20Maps/Savannah.gif' class='img-fluid wx' alt=''></div></div><div class = 'row'><div class = 'col-xl-6'><img src='http://www.dishuser.com/TVMarkets/City%20Maps/Savannah.gif' class='img-fluid wx' alt=''></div><div class = 'col-xl-6'><img src='http://www.dishuser.com/TVMarkets/City%20Maps/Savannah.gif' class='img-fluid wx' alt=''></div></div></div>"
      })

      .when("/Chatham", {
        template : "<a href = '#/!'>CLICK</a>"
      });

    });

JQuery 

$(document).ready(function(){
  $(".wx").hover(function(){
    $(this).css("border", "10px solid red");
    $(this).css("width", "600px");
  }, function(){
    $(this).css("border", "6px solid red");
    $(this).css("width", "500px");
  }
);


  });

CSS 

img {
  border: 6px solid red;
  border-radius: 20px;
  width: 500px;
  height: auto;
}

.row {
  padding-bottom: 10px;
  padding-top: 10px;
}

body {
  background-color: black;
}


@keyframes slideOutLeft {
    to      { transform: translateX(-100%); }
}

@keyframes scaleUp {
    from    { opacity: 0.3; -webkit-transform: scale(0.8); }
}


.ng-enter           { animation: scaleUp 0.5s both ease-in; z-index: 8888; }
.ng-leave           { animation: slideOutLeft 0.5s both ease-in; z-index: 9999; }

1 Ответ

0 голосов
/ 10 мая 2018

jQuery .on (.hover - сокращение для .on("mouseenter mouseleave",...)) работает только с элементами, которые в данный момент находятся в DOM, когда вы его вызываете.Следовательно, поскольку все ваши шаблоны не загружаются в DOM одновременно (именно так работает маршрутизация angularjs), вы должны выполнять вызов jQuery каждый раз, когда загружаете шаблон, в котором есть элементы, с которыми вы хотите связать действия при наведении курсора.

НО ЭТО НЕ НУЖНО.Вы можете создавать стили при наведении курсора с помощью чистого CSS: 

.wx {
    border-style: solid;
    border-color: red;
    border-width: 6px;
    width: 500px;       
}

.wx:hover {
    border-width: 10px;
    width: 600px
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...