The second day I try to get AngularJS to show Yandex Map using ya-maps

The reason I can’t do this is probably the most trivial, therefore, please don’t blame me, I first learned what Angular is the day before yesterday, and Yandex API was discovered yesterday, and considering that a project should fly in a month - time for scrupulous study not.

I will give my code, I will be very grateful if you correct it so that it will work.

index.html

<!DOCTYPE html> <html lang="ru" xmlns:vml="urn:schemas-microsoft-com:vml" ng-app="myApp" ng-controller="myController"> <head> <title></title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1" /> <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> <link rel="stylesheet" href="style.css"> <script src="angular.min.js"></script> <script src="ya-map-2.1.min.js"></script> <script src="script.js" type="text/javascript"></script> </head> <body> <div id="map" class="w3-col s10 w3-dark w3-border"> <!-- <ya-map ya-zoom="8" ya-center="[37.64,55.76]" style="width:400px;height:500px;"></ya-map> --> </div> </body> </html>

script.js

 console.log("script starts"); var myApp = angular .module('myApp', ['yaMap']) .controller("myController", function ($scope) { console.log("In the controller"); var _map; $scope.afterMapInit = function (map) { _map = map; }; $scope.del = function () { _map.destroy(); }; console.log("After $scope ops"); $scope.initialize = function () { var mapOptions = { center: [50.5, 30.5], zoom: 8 }; ymaps.ready(function () { $scope.map = new ymaps.Map("map", mapOptions); }) } });

I hope for your help!

    1 answer 1

    The problem is that non-standard tags have display:inline by default - perhaps the value is different in different browsers. Therefore, setting the dimensions did not work, and since there was no text inside - the element collapsed in width - 0, height - 0.

    Further, in the above script of three functions, none is executed.

    See the page with examples.

     var myApp = angular .module('myApp', ['yaMap']) .controller("myController", function($scope) { var _map; $scope.afterMapInit = function(map) { _map = map; }; $scope.del = function() { _map.destroy(); }; }); 
     ya-map { display: block; width: 400px; height: 500px; } 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script> <script src="//rawgit.com/tulov/angular-yandex-map/master/ya-map-2.1.min.js"></script> <div id="map" class="w3-col s10 w3-dark w3-border" ng-app="myApp" ng-controller="myController"> <ya-map ya-zoom="8" ya-center="[37.64,55.76]" ya-after-init="afterMapInit($target)"></ya-map> <button ng-click="del()">Удалить</button> </div>