How do I create a popup Angular 1.6 component that accepts several parameters and will be used in several pages. One of the parameters will be dynamic -- set in the ng-click that opens the popup.
The popup scope should be a child scope of the calling page (not isolate), and it should have outputs back to the calling page.
Anyone know of a good pattern for that?
It mainly depends on what front-end framework are you using: if you go for Bootstrap than search for Bootstrap's Modal; if you are using Angular Material than it's called Dialog.
And in terms of how to set up the logic for it, well, there are quite a variety of options here as well. The simplest one I can think of would be to:
bind any variables from the popup using ng-model AND
pass it to a service and have custom logic OR in $rootScope OR in Location
This would be just a simple exammple.
Again, I think it mainly depends on what you actually want to achieve, which is not quite clear. I hope this helps.
Related
I am trying to create a service for showing alerts (in case sending a form goes wrong). This will be used on various forms of my project so I thought I could use an independant service for this. The problem is: for this alert I need HTML code at a certain place of my form, so what I need to know is : what's best practice for that?
Can I define a template for my service? And how do I use this template in my form wihch uses the service?
I had a difficult time using angular2 packages for notifications then I decided to create my own notification for a system I'm working on. I scrapped online till I found Mathew Ross' Post Check it out and see if it guides you, somehow.
If showing alerts means showing a popup then it should be a component. Components have a view that is added to the DOM.
You can share a global service that allows other components, directives and services to communicate with your AlertsComponent and pass strings or component types to be shown in the alert. For more details see https://angular.io/docs/ts/latest/cookbook/component-communication.html
I would use ViewContainerRef.createComponent() like demonstrated in Angular 2 dynamic tabs with user-click chosen components to display arbitrary components as content of the alert if you need custom HTML support with Angular bindings in the alert content.
For example we have a web app and sometimes we need to hide or show some custom directives or html parts using ng-if/ng-show/ng-hide. What we do, we click on a link "Example Show Link" and our elements appear or disappear.
So, here is the Problem:
When you go to another page/state/controller of course your directive/html part is still visible.
Is there any cool solution to hide this parts?
Except using rootScope or pushing true/false flag in every controller, 'couse there could be a lot of directives and a lot of controller
You can use routes for this, and ui-router is what I think the best one that handles this. When you use routes, only the current states' templates are shown, when you navigate out of the state, its template (together with all the directives in it) are destroyed. It automatically do it for you.
I'm generating a dynamic number of Google Charts tables after receiving the content through an ajax request and I wanted to apply an accordion effect on them. I wanted to know if I could do that with directives (since if I just code render the angular tags they won't get interpreted).
I don't need a code example, just a short answer to see if I should learn directives or if I should do it in a different way (I was thinking routeParams).
Thanks!
A directive is an equivalent of a jquery plugin, it should be use when you want to create a widget which manages some user interactions or a specific templating.
In your case it's a great idea, the directive could call a service which shall return the server datas and could manage all user interactions like open and close the accordion.
Before all, think about reusability.
Is there any way to make an ionic modal have a ui router nested state with multiple modal pages?
It sounds like you are describing a wizard, A model that has multiple pages (or steps). Because Ionic and AngularJS go hand in hand with each other you can use some of the pre-built AngularJS components to achieve this, here is a link to a few:
https://github.com/mgonto/angular-wizard
https://github.com/simpulton/angularjs-wizard
There is an ionic wizard plugin, which although it is designed for wizard like steps, will pretty much provide a set of linked modal pages which share state, which should meet your needs.
http://arielfaur.github.io/ionic-wizard/
It also has nice features such as preventing progression in a wizard until fields are filled out etc.
I would recommend not doing that because I have tried it in the past and in the end I realized that it wasn't really practical. What you could do is, add:
ng-include src="'your-template.html'" ng-controller="yourTemplateController">
Now you have a view and a controller associated with it. All that is left to is, make the URL change. This can be done by using location.hash, or setting $stateParams and checking for it using $watch. I hope this helps.
I have a Modal component build in jQuery.
I want to integrate it in an Angular app that does not use jQuery, and I don't just want to have it as an external dependency. By that I mean, I don't what to leave it as a thing that can be called from controllers, but isn't a directive or service.
What I'm confused about is if it would be a good idea to have DOM logic inside an Angular service (factory, service, provider), or if I should just make a directive with & expressions? Or maybe both?
Inside controllers, I want to be able to inject Modal and call methods to show or hide the modal and set its content.
What would the proper way of doing this be?
I'm not looking for code, but rather guidance of how a "proper Angular" implementation of this would sound.
Thank you.
To answer your question about dom logic in an angular service. No, it is not a good idea, and if you really think about it, there is no need for that. What do you need:
a modal that can close/open
can execute callbacks based on whether you clicked yes or cancel
For that simple functionality you most certainly don't need any dom logic and especially not any dom logic in your services.
You can use the $modal service and do the styling yourself to make it look the same. Take a look at this plunkr:
http://plnkr.co/edit/WLJfs8axxMJ419N2osBY?p=preview
It is as simple as:
$modal.open({
templateUrl: 'someTemplateOfTheModal',
controller: SomeControllerOfTheModal,
})
You can refer to this for options.
Otherwise, if we are just talking about how to integrate existing jquery stuff in angular, I would still suggest rebuilding it from scratch in the angular way. Basically replace all jquery trigger/event functionality by pure angular.
For example, a modal can be on or off, might have an overlay or not. The modal itself would probably be used to execute a callback event on yes and not on cancel. You might want to also style it using custom classes so you should take that into consideration. Here are the directives you might wanna take a look if you are rebuilding it from scratch:
ng-if/ng-show (would probably be used to show/hide your modal and/or
overlay)
ng-class (would be used to inject any custom classes you might want
to put on your modal)
ng-include (in case you want your modal to be templatized)
ng-click (to do click events on click of your yes/no/cancel buttons
and/or clicking away from the modal or on the overlay)
You can see that it can get a bit cluttered, so the best thing would be to use angular's $modal service because it has all those features builtin. I think it has everything that you might possibly want from a modal, and you should just style it. But of course, for learning purposes, you might want to reinvent the wheel.