There are answers to this problem but they don't work on my current situation.
solution 1: resize.
google.maps.event.trigger(map, 'resize');
The resize redraws the map but it doesn't center, the center gets moved to the top left corner.
I tried to also put another event trigger like ...trigger(map, 'center') without success.
ng-if and refresh=true don't work at all, the map is not rendered as before.
other questions seem to be solved by using angular ui (not quite sure what they meant by this) but this is based in angular material.
Thanks to all for the help.
When using angular google maps 2.0.19 and angular material, a Google Map displays properly the first time it loads. But if the user clicks on a different state and then comes back, without reloading, of course, it only displays a corner of the original map.
Notice on the left the angular material look and on the right the empty space in darker gray, where the rest of the map should show.
The configurations is pretty vanilla:
<ui-gmap-google-map draggable="true"
pan="true"
zoom="map.zoom"
dragging="true"
center="map.center"
events="map.events"
control="map.control"
refresh="true">
And the loading from the controller also:
$scope.map = addressStore.setMap({lat: address.latitude,
lng: address.longitude});
//...also loads other parameters.
In a previous project had the same problem with Angular UI but got solved with this command at the begining of the controller:
google.maps.visualRefresh = true;
But then I moved to Angular Material in this app and the problem showed again.
Thanks in advance.
Related
I am working on a project with videojs that must work on Firefox and IE 11, and is built with a angular-ui-router. One of the states has a video player, and on the first time loading, videojs properly generates the content. However, if you navigate away from that state and come back, videojs content isn't generated and the default html5 video element is displayed. Is there a way to deal with this problem? In addition, (more often in IE 11), videojs will sometimes randomly fail to generate the content on the first page load. I can't figure out if the problems are related, or what is even causing the problem because there are no errors in the console log.
I'm not sure what code will even be relevant to post. Here is the html for the video:
<video controls preload data-setup="{}" class="video-js vjs-default-skin vjs-big-play-centered full-video" poster="img/CollaborationPoster.png">
<source ng-repeat="src in video.srcs" ng-src="{{src.url | trustUrl}}" type="{{src.mimeType}}"/>
</video>
In addition I have:
window.VIDEOJS_NO_DYNAMIC_STYLE = true;
At the start of my app. However, the problem still exists if I get rid of this.
Feel free to ask for any other code that could help diagnose the problem
(NOTE: I am also open to suggestions on using a different framework/etc for the video component. videojs has been very frustrating overall)
EDIT: In case it's relevant, 'full-video' is the only custom class for the video and its styling is:
.full-video {
width: 100%;
height: auto;
}
I have the same problem, and I find a way to solve it.
Add this code in your controller may help you.
$scope.$on('$destroy', function () {
video.dispose();
});
Video is the player object created by videojs() function.
Can look at this discussion for more infomation.
angular single page app, videoJS ready function only fires on page load
I assume you are using some form of routing? Perhaps you need to reload the controller/directive/component.
I am using Chartist JS for my charts in my Angular JS app. The issue is I am seeing this here. There is a JS bin that highlights the issue. The author gives a solution for it. The solution is doing DOM manipulations in Jquery which is easy to do. However with AngularJS the way you manipulate the DOM is via Directives. I have created a plunker here which highlights the same issue in Angular JS but I am confused as to how to put the solution provided by author into my Angular code.
Here is the solution
$('[data-tab]').on('toggled', function (event, tab) {
tab.find('.ct-chart').each(function(i, e) {
e.__chartist__.update();
});
});
Edit: As requested the JSFiddle is updated, so what I am trying to do is. I have three different tabs and three different graphs, whenever I click on them I should see the respective graph. To make the tab behavior possible I have written a basic code using scope and model. which facilitates the changing of tabs. The issue is that the chart is getting created for first or default tab but not for the second and third tab. There is a solution given by the author but I don't know how to implement that in AngualrJS
the jQuery solution that you post is basically finding all the chart references and then doing DOM manipulation and call the update() function.
The key is how to find the chart to update in Angular.
In this case, you can assign a variable when you create a chart. For example:
var chart4 = new Chartist.Bar('#chart4', data1);
var chart5 = new Chartist.Bar('#chart5', data2);
Now you have the reference of the chart. All you have to do is to call update() function to render the chart again.
if (value === "allDrivers") {
$scope.tab = "All";
chart4.update();
}
Here is the working plunker
One thing I like to point out is: right now you need to double click the tab in order to see the chart is being rendered or you resize the browser window. I am still trying to find a way to fix this. But at least this approach gives you an idea how to convert the jQuery solution to Angular solution.
I was able to solve this using angular.element() method. So if you wish you use jquery in your angular code. You have to do this via angular.element method. But make sure to include jquery before angular in your index.html
If jQuery is available, angular.element is an alias for the jQuery
function. If jQuery is not available, angular.element delegates to
Angular's built-in subset of jQuery, called "jQuery lite" or jqLite.
I did not know this. From here it was learning for me. Following advice of #pieterjandesmedt from this post. I was able to do this. For other people who want to learn how this works. I have created a GitHub repo which gives a solution to this issue. The link for problem is given in the question. Hope that helps
I have some problems using Material Design Lite (getmdl.io). I followed the steps showed in the getmdl.io web in order to install it (actually I use bower), but I always have the same problem, when I change the ng-route in my web, some resources don't render properly, I need to reload the page to get it properly rendered, for example.
First I have this:
then when I reload, I get what I want:
What I cant understand is why other resources like google icons or buttons work correctly but the menu button on the nav bar and other resources like this one need to reaload the page in order to render properly.
I try to include the library using the hosted method and bower method.
Any idea what is going on?
i past in my code this function
angular.module('app', ['ngRoute']).
run(function($rootScope, xxxx, xxx){
$rootScope.$on('$viewContentLoaded', function(event, next) {
componentHandler.upgradeAllRegistered();
});
});
It worked perfect! Good luck..
Libraries like MDL work by waiting for the page to load using the DOMContentLoaded event, scanning the page for things like input elements and manipulating them with JavaScript so that they can inject the bits and pieces needed to work with their components. This works fine on static websites, but the DOMContentLoaded event only fires once, so when Angular performs a page transition, the DOM changes without MDL knowing about it.
Material Design Lite has a section in its FAQ about using MDL on dynamic websites:
Material Design Lite will automatically register and render all elements marked with MDL classes upon page load. However in the case where you are creating DOM elements dynamically you need to register new elements using the upgradeElement function. Here is how you can dynamically create the same raised button with ripples shown in the section above:
<div id="container"/>
<script>
var button = document.createElement('button');
var textNode = document.createTextNode('Click Me!');
button.appendChild(textNode);
button.className = 'mdl-button mdl-js-button mdl-js-ripple-effect';
componentHandler.upgradeElement(button);
document.getElementById('container').appendChild(button);
</script>
Of course, this probably isn't terribly easy to do in your case, since you'd have to manually find each new element and call upgradeElement on it.
Usually, instead of doing this sort of event-based DOM manipulation, Angular uses directives to initiate DOM changes. Consider using a library built to interoperate with Angular, instead, such as Angular Material.
I have made a basic carousel and and would like to use ng-animate to animate when entering and leaving each index in an array. The templates in Carousel.Data will soon contain html data. I would like to also know what would be the best way of passing html in an array so the user can click next and be presented with the next html template.
I have ng-animate loaded in the DOM with angular version 1.21 but I get an error when I try to inject the dependancy
var App = angular.module('App', ['ngAnimate']);
Here is what I have so far:-
http://codepen.io/anon/pen/wajRog
any help would be much appreciated
It's difficult to tell in CodePen but be sure that angular.min.js is loaded before angular-animate.js. Make sure the order is as follows:
https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.9/angular.min.js
https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.9/angular-animate.js
https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.9/angular-touch.js
You can rearrange the resources in code pen by clicking the hamburger icon near each resources and clicking/dragging to the top. If i got to https://docs.angularjs.org/api/ngAnimate for example and open the plunker for anchoring. If you move angular-animate cdn script tag above angular.min.js, it will give an injection error.
Let me know if that works.
Thanks to #AJoslin I now have a working google map using only AngularUI and AngularJS.
Unfortunately there are two things I can't figure out how to do which may have to do with Google Map API and my lack of understanding of.
When the map initially loads, I already have a location so I wish to load it with a marker already on it. How do I do that?
I also wish to set the ng-click="myMap.panTo(marker.getPosition()) not to a new marker but to the initial location, which is the only marker I would have since I'm removing the add marker functionality out, once I can figure this one out.
Here is the working jsfiddle
http://jsfiddle.net/jorgecas99/xMw6U/
i think it should be achievable by setting the tilesloaded event, but didnt manage that way, so i ended up using a simple "trick", watching for myMap to appear.
$scope.$watch('myMap', function(){
$scope.setHome();
});
$scope.setHome = function() {
$scope.homeMarker = new google.maps.Marker({
map: $scope.myMap,
position: $scope.mapOptions.center
});
}