I'm looking for a plugin for a modal directive in Angular but there is a requirement not to use the Bootstrap CSS. Angular-UI looks nice but obviously depends on Bootstrap. Any pointers?
In case of Angular-UI you can define your own templates and in case of CSS you can for sure use your own files.
Here are standard templates for modal. The only dependencies on Bootstrap I found are: modal and modal-backdrop so just rename them for your needs or add them to your CSS to get custom styling.
Btw: Angular-UI is modular so you can just use these directives which you really need.
I don't know existing plugin to achieve this without Bootstrap (I use Angular-UI), but you can easily create your own directive using jQuery UI modal.
There are lots of tuto on the internet to create directive for jQuery UI.
I have found a JSFiddle in this Google Group (you have to follow the link in the answer of January 4). User has made a simple directive based on jQuery.
I think it will put you on the right way.
Related
AngularJS 1.4.x is used on my current project. I have to implement tabs section on page. Is it ok to use Bootstrap's JS Tab or I should move to AngularJS based solution, for example UI-Bootstrap or custom tab library?
I think it is totally ok to use Bootstrap JS tab, but as usual angular developers are also divided into two camps, one who want to do everything in angular way(like creating directives or use UI-Bootstrap directives/components), even when it is a very small task and another who wants to mix jquery/bootstrap library with angular and choose one or another depending on the need.
Angular-UI, will also use the same bootstrap library, but you will get an angularized wrapper over it.
My suggestion, use whatever you are comfortable with and don't bind yourself to one opinion or another.
It works fine when the page is opened normally but does not when its open as a modal. The expressions show up as literal text. Do I have to use the Angular Bootstrap UI? Does anyone have an example of how this is done? My modals are stored as partials
You need to use
http://angular-ui.github.io/bootstrap/
its simple to use, just include the javascript, a little CCS and angular.module('myModule', ['ui.bootstrap']);
Once added you have todo some things a different way, plenty of examples on the angular site. One of the main issue it solves is problems when href # is used.
This may not be the fix for you, but you should be using it. Do you have a plunk?
You need to add the Boostrap as a dependency to the angular Application,
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js" type="text/javascript"></script>
and App,
angular.module('modalTest',['ui.bootstrap','dialogs'])
Here is an existing CodePen
As others have said, libraries exist to bring bootstrap into the angular world. Keep in mind, a lot of things are done differently when using them in how you set up your DOM. Bootstrap uses a lot of things in location.hash for controls, which conflicts with angular routing.
The issue is that when Bootstrap pops up a modal, angular has no idea that happened, and that it has a new part of the DOM to compile. If you don't want to pull in the angular bootstrap library (which is pretty good, and should be used if your starting a new page from scratch with the two), you can use $compile linked with a callback into angular (probably via a factory you make) to manually compile what you need.
I am using Angular-Strap, but at this of my project I need to set up an accordion with some special behavior that only Angular UI accordion does... so, is there any conflict if I set up both libraries on the same project?
Is there a way to do not download the full library and only the directive for the accordion that I need and if so, how?
And new to Angular. Thank you
the Angular-ui project has a Bootstrap module that i am sure if compatible with the rest of angular-ui.
try it out: http://angular-ui.github.io/bootstrap/
this way you do not have to use angular-strap.
I have been researching options to using Bootstrap with Angular and it appears to focus on two:
Angular UI Bootstrap
AngularStrap
I see a third option of just using native Bootstrap. What are the pro/cons of all approaches? This seems to hint that Angular UI Bootstrap is not feature complete:
Which one to use, AngularUI Bootstrap or AngularStrap?
I don't use both of them because I don't want my project depends on too many 3rd party libraries. So I just use native Bootstrap JS, but I have to customize it to fit requirement of my project.
I don't say Angular UI Bootstrap and AngularStrap are not good, but with my project's requirement, I don't need all features so they are quite heavy. I just want you to pay attention to a point: currently, AngularStrap supports AngularJS 1.2+, this means it should support IE8 but Angular UI Bootstrap doesn't.
Hi in my case its not about either or, its about getting things done. If a component or directive exists already from aforementioned libraries (probably isn't much difference between angular ui bootstrap and angularstrap) e.g. modal, datepicker and it fits requirements then I'll use it. Otherwise I use vanilla bootstrap to make my own directives :-)
Here's a link to building components using directives in angular.
I'm using Angular UI Bootstrap accordion with templates. I'm wanting to know how I can replace the template that's injected by the accordion directive without modifying the UI library itself? Can I override the injection of the template somehow?
Thanks in advance
Sean
I ended up just adding a template after the bootstrap library. From there I was able to do anything I wanted. See this post
Yes you can but you need to override the class that the angular ui library have. In the css files, but not only, you can find a very precise explanation of every class that the accordion uses, if rewrite the class of your interest in another css file, your attribute override the previous one.