I want to implement the Bootstrap modal in my angular2project. I tried with Bootstrap and jQuery, but my modal does not fade in. And I also tried an Angular dependency ng2-bs3-model, the same issue exists for that dependency also.
Is there any better way to implement the Bootstrap modal in Angular 2?
You could try native modal implementation from the ng-bootstrap project: https://ng-bootstrap.github.io/#/components/modal
The advantage is that those are native Angular directives which means that you wouldn't need to include jQuery or any other 3rd party JavaScript. The implementation of the modal service from https://ng-bootstrap.github.io/#/components/modal is very easy to use. There is a service to which you can pass a component to be used as modal's content. In most cases opening a modal is one-liner:
this.modalService.open(NgbdModalContent);
You can see a working example in action in this plunk: http://plnkr.co/edit/1epmosa7mqHiwF66oHEV?p=preview
Related
I'm working on a Drupal project that imports JQuery on all its pages. We started to use Vue.js by injecting it directly in the HTML pages for the development of dynamic components (not for a SPA).
The problem is that we have JQuery UI that conflicts with Vue.js. It will directly modify all the inputs of Vue.js by readapting their styles.
Is it possible to disable JQuery UI on a particular div, which would contain Vue.js? Without having to disable it on the whole page, because our header has a burger menu that uses JQuery UI.
We found a fix to correct this conflict between Vue.js and JQuery. This method will not completely disable JQuery on a given scope, but will disable a behavior that we were having trouble with.
$('select').selectmenu("destroy")
More about the method destroy here:
https://api.jqueryui.com/selectmenu/#method-destroy
In my application, I'm using the $modal directive of boostrap.ui. I'm also using the Bootstrap navbar with dropdown functionalities.
I'm having the problem that window.html cannot be found as described in this topic.
The problem in my case is that I have both a ui-boostrap.js file and a ui-bootstrap-tpls file included (v1.3.2)
According to this topic, I should only need the tpls file.
However, when I remove the boostrap.js file, all the other bootstrap functionalities for the dropdowns in my header are not working anymore.
Is it not possible to have both functionalities available?
UI-Bootstrap library is just an Angular wrapper for core Bootstrap library to remove the dependency of jQuery from the application. From the docs:
This repository contains a set of native AngularJS directives based on
Bootstrap's markup and CSS. As a result no dependency on jQuery or
Bootstrap's JavaScript is required.
ui-bootstrap-tpls.min.js or ui-bootstrap-tpls.js contains the default template for all the Javascript module shipped by Bootstrap i.e. why it's named -tpls.
The other file ui-bootstrap.min.js or ui-bootstrap.js does not include any templates for the Javascript modules/features.
So you should only include ui-bootstrap-tpls.min.js or ui-bootstrap-tpls.js if you are not planning to override any template.
The answer about why dropdown stopped working after removing bootstrap.js is that your HTML code is still using the jQuery version of Bootstrap but you should start using the ui-bootstrap version of those modules. Yes, it is possible to include both the Angular version of bootstrap (i.e. ui-bootstrap.min.js) and jQuery version of bootstrap (bootstrap.js) but it will be extra overhead on the app.
There is no need of jQuery in order to use Bootstrap's Javascript features if you have already included the ui-bootstrap library.
As explained by shashank, all bootstrap elements in bootstrap.js in converted to angular directives in ui-bootstrap-tpls.
If you simply replace the file it wont work as you expected.
If you changes to ui-bootstrap-tpls then you need to change the corresponding bootstrap components to angular ui directives.
I'm new in AngularJs. I try to make web with AngularJs and Bootstrap. when I call bootstrap modal I use this script :
$scope.here = function here(f) {
$('#smallModal').modal();
$('#contentin').html(f);
}
that code I call use ng-click=here('test')
in my header html i still use Jquery library. My question is , is it posiblle to unload jquery for call modal bootstrap who called with $ prefix. I don't want to use any plugin except AngularJs
If you want to make use of Bootstrap's modal, one option is to use Angular-UI's Bootstrap (if that isn't what you're already using), which puts Bootstrap components into Angular directives for you. Specifically, you would inject the $modal service into whatever module needs to control the modal. Here's an example of how to use the $modal service.
There are many ways of displaying model dialog out there. You can easily search with google.
btw, AngularJS use jQuery - or jQuery lite in the backend.
1st way:
Using angular-bootstrap
BUT: it has bootsrap which is not needed in the project
2nd way:
using ngDialog
BUT: it does not have some necessary functions like 'resolve' that angular-bootstrap modal has
Modal should be implemented without bootstrap and with all the functions that angular bootstrap has.
What would you do?
I am using AngularJS as the framework for building a web app. The DI is good for unit testing and AnguarJS also has a best practice that not have DOM UI related code in controller. I am also using jQuery UI for building UI. Then I have a problem:
For example I am using jQuery UI dialog http://jqueryui.com/dialog/#modal-confirmation, so in the HTML I have the code for declaring the dialog:
<div id="dialog-confirm" title="Empty the recycle bin?">
<p>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>
Then I have a button by clicking on it the dialog will pop up
<a ng-click="showDialog()>Click me</a>
Then in the controller I have the code
$scope.showDialog = function() {
$('#dialog-confirm').dialog( //DOM UI code in controller!
//...
});
}
This is the basic workflow by following jQuery UI demo code: http://jqueryui.com/dialog/#modal-confirmation and I just combined it with AngularJS. It works, but I think there is a big problem in my code: I mixed DOM UI code and logic in my controller thus it breaks the test-ability of the controller.
What should I do to use jQueryUI with AngularJS without breaking DI principle and test-ability?
That's not as easy as it may seem. Angular has so called directives that are used to encapsulate DOM code, but writing directives isn't exactly trivial - it can be tough to get it right.
Your best bet it to use angular-ui which implements similar functionality using bootstrap and pure angularjs (no jquery / jquery ui dependency). It doesn't try to replicate jQuery UI though, but bootstrap's JS functionality, so that's not a drop-in-replacement. I'd suggest you try finding a pure angularjs solution first, if possible.
If you have to use jQueryUI, you can write custom directives that delegate the actual work to jQuery UI. Here's a datepicker example, and there are more examples scattered around the net. The directive keyword will help in googling.
If you really want to delve into the depths of writing angular directives, the source code of angular-ui is very instructive, but it requires an in-depth understanding of scopes, scope inheritance, data binding and angular's compilation process.