AngularJs - How to not using jquery when calling bootstrap modal - javascript

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.

Related

Bootstrap modal in angualar2

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

ui-bootstrap-tpls and ui-bootstrap

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.

How can I get AngularJS binds working with a fancybox dialog?

I'm learning AngularJS and I'm having some difficulties with dialogs.
Since i'm converting my app from a classical Jquery-based to an angular one, i want to use Fancybox to open dialogs with custom dynamic HTML inside, with the fancybox open method.
$.fancybox.open(html);
I wrote a service to use fancybox: now i open my dialogs but the content inside the dialog is not "compiled" against angular, so any angular directive set on that HTML doesn't work.
See the example
http://plnkr.co/edit/UwryF1ocleyND7zxCGJz?p=preview
I imagine that the problem is in the service, but i don't know how to fix it. Could you show me how i can get an html sensible to angular directive inside the HTML shown in the dialog?
UPDATE:
i've tried to use $compile, and set a directive instead of a service (calling the method inside the directive directly from ng-click)
http://plnkr.co/edit/Y18bRSMdV62VObMGJ2Ie?p=preview
what's wrong now? why my $compile doesn't work as expected?
The problem is that angular looks for function expressions only on the scope and NOT on window as plain-javascript does. Hence, when you add an alert function on the $scope, it will be wired correctly: http://plnkr.co/edit/y02UMQ2kU4fh8Imsa82u?p=preview
$scope.alert = function (phone) { window.alert(phone.name); };

Need to use jqueryui accordion, but it has been redefined by a second library

ISSUE: I have situation where jquery ui is loaded and after the jquery ui library is loaded, a custom library is loaded.
This custom library defines an accordion for jquery, thus overwriting the jquery ui accordion.
QUESTION: Is their something I could do in document.ready to define another accordion based off of the jquery ui accordion? Then use this new accordion? Or is their a way to directly call the jquery ui accordion?
The following code obviously calls the second libraries accordion...
$("selector").accordion
I can see the accordion is defined by doing the following in a browser debug console...
jQuery.ui.accordion
but I don't see how I can call it.
I don't have access to the main template for the site, so I can't modify the order of libraries loading. Also, the accordion from the second library is used across the site and it does NOT function at all like the jquery accordion.
Add this:
$.fn.uiAccordion = $.ui.accordion;
$.widget.bridge('uiAccordion', $.ui.accordion);
Call like so:
$('selector').uiAccordion();
DEMO

Strange JS function issue

I'm developing website. Using 2 libraries at same page: jQuery UI and Twitter Bootstrap.
I single-stepped through combobox code, and when it called .button() it went into bootstrap.min.js, not jqui.js. The question is, how to resolve the conflict between these two libraries?
BTW, Here is jsFiddle where it works well without bootstrap
If button is the only conflict then you may save $.fn.bootstrap_button = $.fn.button after loading bootstrap, and then load jqueryui. Or you may configure and download bootstrap without button widget.

Categories

Resources