What's the best way to have my views appear in a popup modal?
I have the main dashboard of my app, and then whenever the user wants to add or edit an item on the dashboard I want this to be done via a form in a popup modal.
I know I can use jquery to handle the showing and hiding of the popup. But is there an angular way to do this, or is jquery acceptable in this scenario?
Check this out and go down to the modal section. This looks nice and clean. There is an example of the html and javascript there for you. Your view is a template and can be a html file or inline html inside the javascript.
http://angular-ui.github.io/bootstrap/
Much like everything in Angular, there are a number of ways you could do this. Perhaps the most simple way would be to have the HTML of the modal be hidden by either ng-show or ng-hidein conjunction with ng-mouseover.
I'm actually doing this right now and decided to use jquery ui for the modal. Dragging and resizing is hard to do and my modal requires that. I wrap the modal call in a directive so modal pops up onclick. The mistake I made was using jquery append to add new html. Don't do this. Use template or templateUrl and then put that in your modal. This will ensure all scope vars in your modal will communicate with your controllers.
Related
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 got the following problem in angular and don't really know how to get around it
When you click on the modal links a modal windows should open, each modal window should have it's own controller
When clicking on the sidebar I want a the respective sidbar controller to load as well as the linked template url.
I have tried different setups but using normal ng-view all content keeps loading in the sidebar content area.
Any ideas on how to use multiple controllers and views in this manner?
i don't 100% understand your question, but try using ng-include instead of the ng-view. You can use ng-view for the whole page and you can load dynamic partials through controllers. https://docs.angularjs.org/api/ng/directive/ngInclude
I am trying to create two tabs using Angular UI (Bootstrap), in which one tab lets the user input HTML, and the other tab serves as a "Preview", rendering the HTML provided.
To handle the preview, I am using the contenteditable directive demonstrated here.
However, this directive does not seem to be working using Angular UI tabs. I believe there may be a scope issue at play, but I haven't been able to track it down. I have already found examples of "gotchas" here, but this doesn't seem to be the issue in my case.
A Plunker of non-working code can be found here. In this example, not only is the HTML not getting rendered, but the scope updates seem to be sporadic.
Any help is greatly appreciated!
You can do this without that directive at all. You just need to use the $sce service in angular. See this plunk
I am using $modal for opening modals.
I have a modal that contains a ui-view. States using the ui-view need to wait until the modal has been added into the DOM, otherwise the states will not find the ui-view to load templates into.
Anyone have a good way for delaying the loading of a template? I have considered a promise that resolves once the modal's controller has been initialized, but I fear it is overcomplicating things.
Thanks
So if anyone is going down the same road, I ended up using Jquery-based foundation for my modal control, rather than the angular-foundation $modal service. With the jquery foundation modals, I can add a hidden modal div to my main template, containing the ui-view. So there is never any waiting for the modal to be appended to the DOM. Activating the modal is just unhiding the modal's div. This solved all timing issues and works as intended.
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.