I am still relatively new to JS and AngularJS and have encountered such a problem. On the page I used this plugin https://jqvmap.com/ . When I started adding functionality to angularJS, the plugin stopped working. I read many places that using Jquery and Angular is not a good idea. Then the question arises: what is the alternative to plugins? Is there any way to remake my plug-in under angular? Or is it possible to find a similar plug-in on angular? Tell me what to do in this situation. Below I give the code, but it’s still interesting why the plugin does not work.

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>

    1 answer 1

    Try this, it should work:

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

    Plunkr example