I would like to create a modal view with angular, but I cannot find any resource online. Can anyone point me into the right direction?
What I mean by modal view is like when clicking on a photo on facebook: it will open on top of the page so that clicking in the background will bring back to the main view.
Of course, I am not looking for css details on how to achieve the lightbox effect.
Thanks in advance.
After experimenting with various options, including the Angular-UI-bootstrap modals, I have come to a pretty satisfying custom solution that provides all functionality you'd want from a modal:
<div class="myBackdrop" ng-show="flag.modalOpen" ng-click="closeModal()"></div>
<div class="myModal" ng-show="flag.modalOpen">
...
</div>
where
// just a boolean flag
$scope.flag = {
modalOpen: false
}
$scope.closeModal = function() {
// optionally do something beforehand
$scope.flag.modalOpen = false;
}
Then all you need is the CSS for .myBackdrop and .myModal
You can use http://angular-ui.github.io/bootstrap for a comprehensive solution.
You can also build it yourself for simple solutions using ng-show on a modal element :-)
Check out this open-source modal(in AngularJS) from ui-bootstrap. It takes advantage of modularity through directives and covers many usability features. This would be a great reference point to build a re-usable solution, even without the Bootstrap CSS.
https://github.com/angular-ui/bootstrap/tree/master/src/modal
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
So I have been trying to implement google single sign on into my angular application; however, sometimes when I reload the page the button disappear. My angular application is using angular routing. If I were to put my button outside of this it would work as expected. It just runs into problem when its loaded through a partial. Any idea how I can fix this?
<div class="g-signin2" data-onsuccess="onSignIn"></div>
<div ng-view></div>
As #agektmr said, the problem is related to the way angular and platform.js interact with each other.
In order to use the auto rendered button you need to trigger the library when the DOM is loaded.
What I did is calling the following code in the onComplete method (I'm working with AngularMaterial dialogs, but you should be able to find a similar method quite easily):
$timeout(function() {
$window.gapi.signin2.render('g-signin2');
});
The only difference is in your html you should change your div and instead of adding it a g-signin2 class you should add an g-signin2 id:
<div id='g-signin2' data-onsuccess='yourMethod'></div>
If you're willing to learn more about Google's implementation you could take a look here.
I'd recommend using imperative approach for implementing the button for this.
<div id="signin">
<button>sign-in</button>
</div>
<script>
document.querySelector('#signin').addEventListener('click', function() {
var auth2 = gapi.auth2.getAuthInstance();
auth2.signIn();
});
</script>
Find more concrete example here
https://github.com/GoogleChrome/google-sign-in
The code you indicated didn't work because of timing. platform.js library tries to take care of it but fails because it's before angular renders DOM.
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.
All I am trying to do is include an anchor tag inside the html of a partial that links to an external site. Were this standard html, the code would simply be:
google
As simple as this is, I cannot seem to find a working solution for getting past angular intercepting the route (or perhaps replacing my anchor with the https://docs.angularjs.org/api/ng/directive/a directive unintentionally?).
I have scoured SO and the rest of the web and seen a myriad of solutions for dealing with: links within the same domain, routing within the SPA, routing within a page (ala $anchorScroll) but none of these are my issue exactly.
I suspect it may having something to do with using $sce but I am an Angular n00b and not really sure how to properly use that service. I tried the following in my view controller:
$scope.trustUrl = function(url) {
return $sce.trustAsResourceUrl(url);
}
with the corresponding:
<a ng-href="{{ trustUrl(item) }}">Click me!</a>
(as described here: Binding external URL in angularjs template)
but that did not seem to do the trick (I ended up with just href="{{" in the rendered page).
Using a plain vanilla anchor link like this:
google
also failed to do the trick (even though some online advised that standard href would cause a complete page reload in angular: AngularJS - How can I do a redirect with a full page load?).
I also tried adding the target=_self" attribute but that seemed to have no effect either.
Do I need to write a custom directive as described here?
Conditionally add target="_blank" to links with Angular JS
This all seems way too complicated for such a simple action and I feel like I am missing something obvious in my n00bishness, at least I hope so because this process is feeling very onerous just to link to another url.
Thanks in advance for any solutions, advice, refs or direction.
It turns out that I did in fact have all anchor links in the page bound to an event listener and being overridden. Since that code was fundamental to the way the page worked I did not want to mess with it. Instead I bypassed it by using ng-click to call the new url as follows:
HTML:
<a class="navLinkHcp" href="{{hcpurl}}" title="Habitat Conservation Plan" target="_blank" ng-click="linkModelFunc(hcpurl)">Habitat Conservation Plan</a>
Controller:
$scope.hcpurl = 'http://eahcp.org/index.php/about_eahcp/covered_species';
$scope.linkModelFunc = function (url){
console.log('link model function');
$window.open(url);
}
And voila! Good to go.
Thanks again to KevinB for cluing me in that this was probably the issue.
Actually I want to create a calendar like Google calendar, In which user can able to create events. So that I want a popover when user clicks on cells. Please give me any suggestion for this. I have also confused between ng-grid and ui-calendar, which is the best option for drawing calendar, binding click event etc.
Thanks in advance.
No reason to worry about ng-grid, you could build a calendar out of it but the existence of ui-calendar makes that just a good coding/css exercise.
The Angular UI Calendar (https://github.com/angular-ui/ui-calendar) is a wrapper around the jQuery fullcalendar plugin (http://arshaw.com/fullcalendar/docs/). You can use the documentation on the latter and pass options right through the directive.
Example from the GitHub page referenced above:
myAppModule.controller('MyController', function($scope) {
/* config object */
$scope.calendarConfig = {
height: 450,
editiable: true,
dayClick: function(){
scope.$apply($scope.alertEventOnClick);
}
};
});
<div ui-calendar="calendarOptions" ng-model="eventSources">