I am using bootstrap popover with angular template. I am including the angular template with ng-include directive. The template consists of a popover. I am trying to bring that popover through a angular directive but it's not getting displayed.
angular directive
angular.module('app').directive('popover', function () {
return {
link: function (scope, element, attrs) {
$("[data-toggle=popover]").popover();
}
};
});
The following html template is being included from another html page with ng-include directive.
<div>
<span class="title">
<button title="" data-original-title="" class="popper btn-link" popover data-toggle="popover">4 Peoples</button>
<div class="popper-content hide">
<p>
<span> Alex</span>
</p>
<p>
<span>Francis</span>
</p>
<p>
<span>Mark</span>
</p>
<p>
<span>Peter</span>
</p>
</div>
</span>
</div>
But, if I click the button the popover is not getting displayed.
First, from my own experience I recommend using angular-bootstrap for things in that scope.
Second, if you really want it to work, make sure the bootstrap scripts are correctly loaded. Then try to listen to the click event with ng-click on the button and trigger the popover on it.
Here is the code to achieve what you want.
scope.popover = function() {
$("[data-toggle=popover]").popover({
html: true,
content: $('.popper-content').html(),
placement: attrs.popoverPlacement
});
};
Here is the html:
<button type="button" popover-placement="bottom" class="popper btn-link" popover ng-click="popover()" data-toggle="popover">
4 Peoples
</button>
Here is the plunkr :
https://plnkr.co/edit/fBPJ8LfOFGlgcCHvRWSM?p=preview
There are plenty way of achieving what you want. By the way I recommend you to read this :
"Thinking in AngularJS" if I have a jQuery background?
Regards,
Related
I have multiple bootstrap dialog divs in one single jsp.
Dialog divs look like below
<div id="manage-notes-dialog" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 id="about">NOTES <input name="backButton" type="button" value="⇚ " class="btn btn-primary pull-right" /></h3>
</div>
<div class="modal-body">
.......UI HTML.........
.......UI HTML.........
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
In my jquery button clicks I was opening the dialogs as below
$("#manage-notes-dialog").modal('show');
Above command being part of jquery click action for button
I am changing my UI handling from jQuery to angularjs.
After writing the angularjs controller and testing it I wrote below code to open the above dialogs.
$scope.openNotes = function() {
$("#manage-notes-dialog").modal('show');
};
This still not completely using angularjs as $("#manage-notes-dialog").modal('show'); is still jQuery and stops when I remove the jquery js.
I wanted to know if I can have the bootstrap modal dialogs opened through angularjs. I want to avoid to re-write all modal dialog from scratch while using angularjs as a lot of data is being loaded via JSTL. I am pretty new to angularjs And doing what has been said in this “Thinking in AngularJS” if I have a jQuery background? not that simple
Please suggest possible workaround/solution steps. Most of the solution/examples I have found are completely using angularjs modal directive. or individual html.
My constraint is that I want to keep all the dialogs in one single jsp as they would be common to multiple UI pages
I went by what Matthew Green suggested in his comment
.
Using ng-template I generated div and loaded it via angularjs uibModal open call. Wrote a separate controller dialogController which will handle all actions and scope variable and actions used by my Modal div.
Below is the javascript call I used to open the div from the template cache.
var modalInstance = $uibModal.open({
templateUrl: 'error-dialog',
controller: 'dialogController',
scope: $scope,
resolve: {
msg: function(){
return 'ErrorMessage for DIsplay';
}
}
});
The div element inside the javascript looks below
<script type="text/ng-template" id="error-dialog">
<div class="modal-body alert-danger">
<button type="button" class="btn btn-default pull-right" data-dismiss="modal" ng-click="close()">⤫</button>
<pre class="alert-danger" style="border:0px;">{{msg}}</pre>
</div>
</script>
And finally the controller
.controller('dialogController', [ '$scope','msg','$uibModalInstance' ,function($scope, msg,$uibModalInstance) {
$scope.msg = msg;
$scope.close = function() {
$uibModalInstance.dismiss('cancel');
};
} ])
I am new to angular js and bootstrap. I have a requirement that i need to implement a popover on hover or click and the user should be able to edit the tooltip. Could you suggest an approach to implement it.
Hover over me
I am open to any other approach also.
Check the angular-ui-bootstrap - project, specifically the popover directive:
https://angular-ui.github.io/bootstrap/#/popover
You will need to add the angular-ui-bootstrap scripts to index.html, along with the regular bootstrap css - there is a CDN for this:
https://cdnjs.com/libraries/angular-ui-bootstrap#
After adding the above 2 scripts (min or unminified) and the bootstrap.css file to index.html - you must add angular-ui-bootstrap to your apps bootstrap process like:
angular.module('myModule', ['ui.bootstrap']);
At that point you are ready to use the popover - for instance on mousenter:
<button uib-popover="This popover appeared on mouse enter!"
popover-trigger="'mouseenter'"
type="button"
class="btn btn-default">Hover Over</button>
You can obviously make this dynamic - per your requirements - just like the examples in the docs:
<div class="form-group" ng-controller="MyController as vm">
<label>Popup Text:</label>
<input type="text"
ng-model="vm.popoverContent"
class="form-control"/>
<button uib-popover="{{vm.popoverContent}}"
popover-trigger="'mouseenter'"
type="button"
class="btn btn-default">Dynamic Hover Over</button>
</div>
I am using this component in my example, but when I click on my icon, my popover is not displayed.
When I click on an icon it should display the popover but currently, it is not display anything.
Here is my code (and this is the CodePen):
<script type="text/ng-template" id="myPopoverTemplate.html">
<div>hhh</div>
</script>
First, from my own experience I recommend using angular-bootstrap for things in that scope.
Second, if you really want it to work, make sure the bootstrap scripts are correctly loaded. Then try to listen to the click event with ng-click on the button and trigger the popover on it.
Here is the code to achieve what you want.
Here is the plunkr : https://plnkr.co/edit/fBPJ8LfOFGlgcCHvRWSM?p=preview
Regards,
scope.popover = function() {
$("[data-toggle=popover]").popover({
html: true,
content: $('.popper-content').html(),
placement: attrs.popoverPlacement
});
};
Here is the html:
<button type="button" popover-placement="bottom" class="popper btn-link" popover ng-click="popover()" data-toggle="popover">
4 Peoples
</button>
Regards,
I have two element in the same page:
one is into a div and another one is into an overlay.
I want to display only the element inside the overlay and not element in the page (it is also hide by overlay).
I don't know how can I prevent this... I bind the directive by attributes, maybe should I pass some other params to element?
This is plunker example: Plunker
As you can see, I want to hide text in page when modal (simple example, but I use another plugin) is open and show it in modal and viceversa... I preferer to use only directive and/or some more attributes in the element...
I test a lot but I don't find solution...
Code:
angular...[]....directive('example', function() {
return {
restrict: 'A',
replace: true,
link: function($scope, $element, $attrs) {
$scope.display = "IT's WORK TEXT BY DIRECTIVE";
}
};
});
<script type="text/ng-template" id="myModalContent.html">
<!--Modal-->
<div class="modal-body">
<span example="" class="text-danger"><br><br>{{display}}<br><br></span>
</div>
</script>
<button type="button" class="btn btn-default" ng-click="open()">Open me!</button>
<span example="" class="text-danger"><br><br>{{display}}<br><br></span>
You can use a combination of ng-show and a js closure passed to the modal for toggling the visibility of your text. So... the display visibility will be controlled by the ng-show
<span example="" ng-show="elemVisibility" class="text-danger"><br><br>{{display}}<br><br></span>
You can toggle the visibility with a js helper function
function _setElemVisiblity (isModalOpen) {
$scope.elemVisibility = !isModalOpen;
}
You can pass this as a callback to your modal and trigger it whenever you open/close the modal.
Updated plunk here
I have a simple directive:
<div my-directive>
<span ng-click="reveal()">Click Me</span>
<!-- And other stuff -->
</div>
When I press Click Me, a modal opens up with a form for you to edit some content. All these contents are to part of the scope.form data. For now, say this object only has one entry called name.
So this is what I did for my directive:
scope.reveal = function()
{
var el = $compile('<input type="text" ng-model="scope.form.name" />')(scope);
// Now launch the modal
}
So the modal does open up and the content of scope.form.name is shown correctly. However, if I close the modal, and open it again, the value is not saved (i.e, the scope.form.name is not updated inside the directive).
What's the best I can do this?
With angularjs you usually don't compile and add elements to the DOM. You should declare your form in your template and bind ng-show to a property on the scope to show/hide your form.
<div my-directive>
<span ng-click="form.show = true">Click Me</span>
<form ng-show="form.show">
<input type="text" ng-model="form.name" />
<form>
</div>