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.
Related
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'm facing an interesting issue here.
I'm developing a Chrome Extension with a content script.
This extension is intended to add a little div to a page, this div using AngularJS. (I chose Angular because I want this div's data to be readily updated by change of var values).
I'm able to add the div once and bootstrap it. So the behavior of the div is fine.
But the main page (which I have no control over) often reloads everything using Ajax. (Then I'm totally unable - I think - to get events from certain elements being removed).
I was able to create ways to check if my elements are still on the page, and if not, they are added again. The appendChildPersistent method takes care of it. (It waits for a certain element to appear on the main page. Adds my element to it. Runs the callback when added. Keep checking if the element is still there, if not, repeat all over).
So all my ordinary elements work perfectly.
But this angular div cannot be bootstraped a second time.
Procedures:
I wait until a certain element appear on the main page
I add my own div myDiv from a plain text html using jquery append to the main page div
I load the angular application and bootstrap it using the callback function when the div is added:
Code:
var txt = '<div id="myDivId" ng-controller="myController">{{testing}}</div>';
appendChildPersistent('myDivId', MyDiv, '#theTargetMainPageDiv', function()
{
var app = angular.module('myApp', [])
.controller('myController', function($scope) {
$scope.testing = 'Welcome!';
});
angular.bootstrap(document, ['myApp']);
});
So, the first time my div is added, it works. The angular vars and directives work (in this example, the div shows "Welcome!"). But the second time, I get an "already bootstrapped" error. (But if I do not try to bootstrap again, the div becomes just plain text, no angular behavior, showing "{{testing}}" instead of "Welcome!").
Is there a way to unboostrap, redo bootstrap or another method I could work to get around this?
Your application only focuses on the div you insert. You can make an Angular application run on a certain area of the page instead of covering the whole document. Simply pass the DOM element to the bootstrap function:
angular.bootstrap(myDiv, ['myApp']);
This way Angular only runs in your div and you are able to bootstrap the app every time you add a new div.
I want to have a column chart in my angular app that could be drilled down to a line chart. I think the main problem is to be able to handle click event on each column that I could not find it highchart nor angular-chart. Can you tell me a way to construct such thing?
ZingChart has an Angular directive that works well with your use case. You can use the directive with ZingChart's internal events to bind to just about anything on the chart :
zingchart.node_click = function(p) {
....
}
Demo : http://jsfiddle.net/mschultz/ck84wjce/
Angular Directive: https://github.com/zingchart/ZingChart-AngularJS
Docs : http://www.zingchart.com/docs/api/api-events/
It can also perform drilldowns fairly easily across different types of charts: http://www.zingchart.com/blog/2014/09/02/chart-drilldown-interactive-feature/
If you need any help, feel free to reach out - I work for the ZingChart team!
Check out this page for an example on Angular Drill Down chart using CanvasJS Angular Chart. It also includes angular source code or download angular sample from download page.
Check this StackBlitz for a simple example.
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.