Как применить плагин jQuery на angularJs?

445

30 декабря 2016, 12:25

Я еще относительно новичок в JS и AngularJS и столкнулся c такой проблемой. На странице использовал данный плагин https://jqvmap.com/. Когда начал добавлять функционал на angularJS, плагин перестал работать. Много где читал, что использование Jquery и Angular не самая лучшая идея. Тогда возникает вопросы: какая альтернатива есть плагинам? есть возможность как-нибудь переделать мой плагин под angular? Или возможно найти похожий плагин на angular? Подскажите как правильно поступить в данной ситуации Ниже привожу код, все же интересно почему не срабатывает плагин

index.html

<!DOCTYPE html> 
<html lang="en" ng-app="app"> 
<head> 
	<meta charset="UTF-8"> 
	<title>Document</title> 
  <link rel="stylesheet" href="css/main.css"> 
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
  <link href="css/jqvmap.css" media="screen" rel="stylesheet" type="text/css"> 
	 
 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
  <script type="text/javascript" src="js/jquery.vmap.js"></script> 
  <script type="text/javascript" src="js/jquery.vmap.world.js" charset="utf-8"></script> 
  <script type="text/javascript"> 
  jQuery(document).ready(function() { 
    jQuery('#vmap').vectorMap({ map: 'world_en' }); 
  }); 
  </script> 
</head> 
<body> 
<header ng-include="'template/header.html'"> 
   
</header> 
 
	<ng-view>  
  </ng-view> 
  <footer ng-include="'template/footer.html'"> 
     
  </footer> 
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script> 
  <script src="js/main.js"></script>    
     
</body> 
</html> 
</html>

main.js

var app = angular.module ('app', ['ngRoute']); 
 
app.config(function ($routeProvider) { 
	$routeProvider 
		.when('/', { 
			templateUrl: 'home.html' 
		}) 
		.when('/company-rates', { 
			templateUrl: 'company-rates.html' 
		}) 
});

home.html

<main> 
  <div class="container"> 
    <div class="row"> 
      <div class="col-md-5 .col-sm-6"> 
         
        <div class="row"> 
          <div class="currency-sorting"> 
          <h1>Want to Send Money?</h1> 
            <div class="form-group"> 
              <label>From</label> 
              <input type="search" class="form-control">  
            </div> 
            <button type="button" class="btn btn-default"> 
              <span class="glyphicon glyphicon-transfer"></span> 
            </button> 
            <div class="form-group"> 
              <label>To</label> 
              <input type="search" class="form-control"> 
            </div> 
          </div> 
 
          <div class="form-group rate-btn-group"> 
            <button class="btn btn-default">Set Rate Alerts</button> 
            <button class="btn btn-default" onclick="window.location.href='/company-rates.html'">Search Best Rate</button> 
          </div> 
        </div> 
      </div> 
      <div class="col-md-7 .col-sm-6"> 
        <div class="maps"> 
          <!-- <img src="img/world.png" alt=""> --> 
          <div id="vmap"></div> 
        </div> 
      </div> 
    </div> 
  </div> 
</main>

ПОСЛЕДНИЕ ВОПРОСЫ

21:33

Виртуальный выделенный сервер (VDS) становится отличным выбором
22:26
22:40

Создание игр для детей: первые шаги в IT мире
08:34
15:01

Основные задачи SEO оптимизатора
17:01
11:24

Выделенный сервер для игр: преимущества и недостатки
10:16
17:54

Все вопросы

ТОП-10

Все популярные вопросы

How do i add Search filter [требует правки]

i have this search filter: http://jsfiddlenet/n3EmN/171/ Its made with checkboxes,but i want to add there a searchbar too,which will interact with those,but dont know how to do it

454

CSS