I don't really have code to show. I thought just maybe it'd be as simple as copying the module directive from angular strap over to ui bootstrap, but that's very obviously been proven incorrect. Has anybody else tried doing this with any success? To reiterate, I want to be able to use the aside module of Angular Strap with AngularUI Bootstrap.
Both products are constructed so that you can pick and choose which parts to use. If you look at Github you'll find the separate source for Aside:
https://github.com/mgcrea/angular-strap/blob/master/src/aside/aside.js
Download that and include it in your project.
Just like #Don said in his comment, aside requires modal directive from ngStrap that will conflict in ui-bootstrap's modal directive. But theres still a solution.
The solution is quite simple and I only had to add one dependency to get the basic CSS from the AngularStrap CSS project although this is not really needed but saves some time. The dependency is bootstrap-additions and you only need the aside.less file or the CSS if you prefer.
The code is pretty simple because the angular-ui modal component allows to use custom templates for the modal content but also for the modal container so you are not restricted to Bootstrap modal, you can create your own.
$modal.open({
templateUrl: ‘your.modal.template.html’,
windowTemplateUrl: ‘aside.template.html’
});
Heres is the full tutorial/solution where I got the answer. Credits to him.
Related
I'm building a react based web app using some html/css styles from one of the free "flat file" templates provided by bootstrap.
the template uses scrollspy to change the correct menu item hover colour to the section the user has scrolled to.
This effect is achieved using this code in one of the javascript files
$('body').scrollspy({
target: '#nameHere'
});
in my react component, I am trying to do this
document.body.scrollspy({ target: '#nameHere' })
but when I run the application I am getting a "document.body.scrollspy is not a function" error.
Is there something painfully obvious I am doing wrong here?
Hmmm... I think, the problem is that the document.body element has no property scrollspy.
Ok I found a few ways to get this working.
A more robust way is to use the React Scroll component mentioned by Valentin above, but this involves taking a dependency on another module and because of some other stuff in my situation I wasn't able to get this working.
A quicker, more hacky way is to add
data-spy="scroll" data-target="#namehere" data-offset="56"
to the body tag of index.html
I've been working with Angular and Angular Material for a while. One thing that bewilders me is how much boiler plate code you need write to just create a simple dialog.
The dialog needs to be defined in a component, and adds to the entry declaration of the module if not used in the same file. The dialog itself needs to inject a MatDialogRef, so you can pass data out when it closes. You need to inject a MatDialog into the main component that opens the dialog. You need to call its open function to open the dialog and pass value explicitly to the component. You probably need to read a tutorial to start using it.
It works well but compared with other implementations, it just seems too complicated. For example, in PrimeNG, a component library for Angular, you can define a dialog like:
<p-dialog header="Title" [(visible)]="display">
Content
</p-dialog>
You have a single variable that controls the visibility of the dialog. Anyone knows a little Angular can start using it with no learning curve.
So my question is: why Angular material wants to implement this way? What kind of advantage does it have? Is it efficiency or it gives you more flexibility in implementing complex functionalities?
I'm using AngularJS ver. 1.6.8.
I have a component I have built called icons. To incorporate it in a page I just add <icons></icons> and the component is inserted into the page.
Now I have a scope variable that holds html, and part of that html is the previously mentioned code <icons></icons>.
When I use ng-bind-html it doesn't compile the component and instead just shows <icons></icons> as text.
I have tried using angular-bind-html-compile (link) but that didn't help.
All of the solutions I found seem to support angular pre made directives and not newly formed components.
Happy to hear of any possible solutions.
Did you do the following on your scope variable which holds the html code? This is a common mistake.
$scope.trustAsHtml('<div>....')
But as mentioned before, without your code it is hard to figure out the problem.
I have this website (in Hebrew): http://www.iping.co.il (if you could have a look at it maybe with google translate and see what it does it could be great but not a must).
It basically a website that shows your IP, and gives you a set of tools (like ping, whois check, open port checks...).
I've built it a while back and I was using jQuery and jQuery UI to do all the work (like opening dialogs, call the server, change the DOM, show a progress bar...).
Now I'm working on rebuilding it - I'm rebuilding using ASP.NET MVC 5, HTML5 and Bootstrap3. I figured it's a great little website to test new things I've been reading about lately. And one of those things I would like to try and implement (after reading much about) is AngularJS.
As far as I know, AngularJS is not meant to change the DOM directly, but use directives and 2 way bindings to do so.
I have a lot of code, and plugins that I use that uses jQuery and jQuery UI to (for example the dialogs, the progress bar and so on... things that I haven't figured out how to do with AngularJS). It seems that if I use the jQueryUI progress bar and update it from from AngularJS that I'm breaking some rules here and that it's probably dirty and not the way it should be written.
So my question is, what is the correct way to work when and build a rich UI when using AngularJS? is jQuery and jQueryUI even still relevant? if so, is there a correct way to use them (maybe DI somehow?)?
I've searched and found something called AngularJS UI - but it's not as rich as jQueryUI.
Thank you
Using plugins within directives is fairly simple in concept.
<div my-directive></div>
Following is a very minimialistic directive with just enough code to initialize a plugin. The returned function is equivalent to link in a more defined directive
angular.module('myApp').directive('myDirective',function(/* dependencies*/){
/* element is a jQuery object when jQuery is included in page before angular.js*/
return function(scope,element,attrs){
/* can use attributes or scope to pass options to plugin if needed*/
element.someJqueryPlugin();
}
});
This would be equivalent to writing in jQuery only:
$(function(){
$('[my-directive]').someJqueryPlugin();
});
If you want to use AngularJS and Bootstrap I suggest you take a look at these directives:
http://angular-ui.github.io/bootstrap/
Once you load the modules, you can set up say a progress bar this way:
<progressbar max="max" value="dynamic">
<span style="color:black; white-space:nowrap;">{{dynamic}} / {{max}}</span>
</progressbar>
You shouldn't even need to include JQuery if you only need the Bootstrap components.
Problem: How do I manage a bunch of modals in an Angular JS controller?
I was putting them at the bottom of my view and using http://angular-ui.github.io/bootstrap/#/modal
but I was ending up with large html templates (that work) but feel inefficient.
What I've tried:
$dialog from UI-Bootstrap (pain in the butt)
Modals stored in templates included via ng-include using UI-Bootstrap's modal
modals put at the bottom of my view within the controller << currently on and is working
This feels like I'm missing something. Any pointers?
EDIT:
I did A LOT of searching and found a script and then upgraded it a bit:
Your modals are external templates
Their also in the scope where you clicked the button
3 different kinds (Confirm, Message, Load a template)
https://github.com/clouddueling/angularjs-modals
Update
I've since made a repo covering this issue: http://clouddueling.github.io/angular-common/
As rGil stated, use a directive, your own and not UI-Bootstrap if it seems too convoluted. All your modals will be similar, more or less. You just have to have a template and 2-3 scope variables to populate the modal. You can then pass parameters to open and close the modal as well and offer further functionality. The more you include the bigger the directive will be.
A second option would be to create separate HTML partials with those modals, and then just use ngInclude to place them in your views. This would be a huge time saver if your modals are different, but are reused frequently on multiple pages. Down sides to this is that you still need to toggle it open and closed. The Angular way would be to write a directive to handle just the toggling if that is all you need. The easy way is to write a little jQuery and open the modal on click or whatever.
Honestly, what it all comes down to is your comfort level. Will jQuery destroy your code? No, but it is not the "Angular Way". With jQuery, I can write a modal toggle in 3-4 lines of code. Doing it the Angular Way is a directive and a dozen+ lines of code. But the Angular way has the benefit of writing a tag in the future and no more code is needed. If I have just one modal, I may do it in jQuery. If I have multiple modals, as in your case, I may invest the time to learn directives and come up with one that works how I want it to work.