is it possible to trigger the popover directive on an event? I'm trying to look for a string character and trigger a custom template, however, I cannot find a way to get my way around it, I only see custom attributes attached to a button.
You can use popover-is-open to display the popover on a given event.
Here is an example, where a timeout is used to simulate an event that shows the popover:
Markup:
<div ng-controller="PopoverDemoCtrl as vm">
Wait for 3 seconds for the event to happen...
<div uib-popover="Read the message!"
popover-title="Hello World!"
popover-placement="bottom"
id="popover"
class="btn btn-default spaced"
popover-is-open="vm.showPopover">
Popover
</div>
</div>
JavaScript:
function PopoverDemoCtrl($timeout) {
var popoverDemoCtrl = this;
popoverDemoCtrl.showPopover = false;
$timeout(function () {
popoverDemoCtrl.showPopover = true;
}, 3000);
}
PopoverDemoCtrl.$inject = ['$timeout'];
angular
.module('myApp', ['ui.bootstrap'])
.controller('PopoverDemoCtrl', PopoverDemoCtrl);
The full Fiddle: http://jsfiddle.net/masa671/gtgqof2k/
Related
I have a list of customers each customer have button more info.
I want , when i click on it then showing bootstrap modal by AngularJs controller and then request data by $http.post and getting some more info about this customer and showing info inside modal.
How can i do this purpose ?
this button :
<button type='button' class='btn btn-primary btn-sm'
data-ng-click='moreinfo(customer.id)' >more info</button>
You can first pass each customer info variable to each more info.
Button like this :
<button type='button' class='btn btn-primary btn-sm btnmargin'
data-toggle='modal' data-target='#cInfo' data-ng-click='moreinfo(customer)'
>more info</button>
then you should write this code inside controller :
$scope.customerinfo=[];
$scope.moreinfo= function(customer){
$scope.customerinfo= customer;
};
Html bootstrap modal :
<!-- Modal start -->
<div class='modal fade' id='cinfo' tabindex='-1' role='dialog'
aria-labelledby='myModalLabel' aria-hidden='true'>
<div class='modal-dialog modal-lg' role='document'>
<div class='modal-content'>
<div class='modal-header'>
<button type='button' class='close' data-dismiss='modal'>
<span aria-hidden='true'>×</span>
<span class='sr-only'>Close</span></button>
<h4 class='modal-title text-danger'
id='myModalLabel'>customer info</h4>
</div>
<div class='modal-body'>
{{customerinfo.firstName}}
</div>
<div class='modal-footer'>
<button type='button' class='btn btn-default'
data-dismiss='modal'>close</button>
</div>
</div>
</div>
</div>
<!-- Modal end -->
Now you can click on each row button more info and see info in inside modal body.
Use ngDialog instead of bootstrap modal.
It is easy to implement in angularjs and you can have different controller for it as well and you can definitely transfer data from main page to this ngDialog.
https://github.com/likeastore/ngDialog
I will suggest you to go with ui-bootstrap but looking at other answers and considering you do not want to add any more JS library/plugin
Hope this helps you
Add a directive called bootstrap-modal as following
app.directive('bootstrapModal', ['$rootScope', '$http', function ($rootScope, $http) {
"use strict";
return {
restrict: "A",
//add isolated scope if you want
//scope: {
//},
link: function (scope, element) {
scope.$on('showModal', function (event, object) {
//fire your ajax here
$http.get('url').then(function(response){
//process your response alter DOM and show modal
element.modal('toggle');
});
});
}
};
}]);
and in your moreInfo function in controller
$scope.moreInfo = function(){
$rootScope.$broadCast('showModal', dataToPassToListener)
}
You should use the directive with the div which you want to show as modal. As in the same div where you would have given role="dialog" if you would have used simple bootstrap.js
I know that you don't want more JS plugin but I suggest you to use the UI Bootstrap for Angularjs:
https://angular-ui.github.io/bootstrap/
It's basically a set of pre-defined directives you can use to load Bootstrap component.
In your case, the thing can end like that:
<button type="button" class="btn btn-primary" ng-click = "moreinfo(customer.id)"> More Info </button>
In your controller :
angular.module('myApp').controller('CustomerInfoCtrl',['$uibModalInstance','$scope', function($uibModalInstance,$scope){
$scope.moreinfo = function(id){
var InfoModal = $uibModalInstance.open({
templateUrl : 'route/to/my/template.html,
controller: 'MoreInfoCtrl',
scope: $scope,
resolve: {
customerId : function(){
return id;
}
}
});
InfoModal.result.then(function(){
//callback when modal closed
},function(){
//callback when clicked on cancel to dismiss the modal
});
}]);
Then you create another controller, MoreInfoCtrl:
angular.module('myApp').controller('MoreInfoCtrl',['$http','$scope','id', function($http, $scope, id){
//Do your http call with the variable id (i.e the customer.id )
}]);
You have plenty of options. You can easily pass variables, scope or do callback process.
I'm using it a lot in a project and it really helps a lot.
I suggest you to try it. And it's not really heavy (from above link):
Whichever method you choose the good news that the overall size of a
download is fairly small: 122K minified for all directives with
templates and 98K without (~31kB with gzip compression, with
templates, and 28K gzipped without)
ng-disabled not working with $().button('loading') & .button('reset'). How to fix this issue?
Also I have Plunker.
You can bind button text to the scope and modify it according to the relevant state.
HTML:
<button id="someButton" class="btn btn-default btn-sm"
ng-disabled="!someArray.someBool" ng-click="someClick()">{{button}}</button>
Before click - Button
While loading - Loading...
After loading - Loaded
I used a $timeout function of 2 seconds instead of making a real async request.
Controller:
$scope.someClick = function() {
$scope.button="loading...";
$timeout(function(){
$scope.someArray.someBool = false;
$scope.button="loaded";
}, 2000);
}
working plunker
How can we trigger the button click event using AngularJs and show an alert message box? I have tried the alert("message") messagebox but it doesn't work.
You can use ng-click on button something like this:
Controller :
var VLogin = angular.module('myApp',[]);
VLogin.controller('TestCtrl', ['$scope',function($scope) {
$scope.clicked = function(){
alert("Clicked");
}
}]);
And in your HTML like :
<div ng-app="myApp">
<div ng-controller="TestCtrl">
<button ng-click="clicked()">Click me!</button>
</div>
</div>
Here is the working Fiddle :- http://jsfiddle.net/nuejh9h6/
Thanks
we need to see what you have wrote but in general this is how ng-click works https://docs.angularjs.org/api/ng/directive/ngClick and you can write your alert code inside or in a new method and call it.
I'm using AngularStrap with bootstrap.
I have a modal dialog that uses it's own controller. How can I close the modal using this local controller?
I instantiate the controller on a button like this:
<button type="button"
class="btn btn-success btn-lg"
bs-modal="modal"
data-template="user-login-modal.html"
data-container="body"
ng-controller="userLoginController"
>Click here to log in</button>
and the userLoginController has this:
$scope.authenticate = function(){
this.hide(); // this doesn't work
}
This is obviously just a demo, I want it to close on successful login, but this is where the code I'd use to close it would go.
I've tried instantiating the modal programmatically (use the $modal service to create the modal) but I haven't been able to figure out how to inject the controller through that method.
If I were to do something like emit an event from the modal using the bs-modal directive, how can I reference the modal to close it?
here's my plnkr:
http://plnkr.co/edit/m5gT1HiOl1X9poicWIEi?p=preview
When in the on-click function do
$scope.myClickEvent = function () {
this.$hide();
}
Figured out a good method:
I moved the ng-controller to the TEMPLATE and instantiate the modal using the provided modal service. I then use a rootscope broad cast to let everyone know that someone successfully logged in.
new controller code:
var loginModal = $modal({template:'/template.html', show:false});
$scope.showLogin = function(){
loginModal.$promise.then(loginModal.show);
}
$scope.$on("login", function(){
loginModal.$promise.then(loginModal.hide);
});
the button just looks like this now:
<button type="button"
class="btn btn-success btn-lg"
ng-click="showLogin()"
>Click here to log in</button>
and my template has the old ng-controller in the first tag.
I am probably too late, but just wish to share my answer. If all you need is hiding the modal after form success, then bind that $hide function to one of controller varriable.
<div class="modal" data-ng-controller="Controller" data-ng-init="bindHideModalFunction($hide)">
In the controller:
// Bind the hiding modal function to controller and call it when form is success
$scope.hideModal;
$scope.bindHideModalFunction =function(hideModalFunction){
$scope.hideModal = hideModalFunction;
}
I found all of the above answers way too complicated for your use case (and mine when I ran into this problem).
All you need to do, is chain the ng-click to use the built in $hide() function that angular strap bundles.
So your ng-click would look like: ng-click="authenticate();$hide()"
Using Angular and bootstrap if you want to submit data to controller then have the modal close just simply add onclick="$('.modal').modal('hide')" line to the submit button. This way it will hit the controller and close the modal. If you use data-dismiss="modal" in the button submit never hits the controller. At least for me it didn't. And this is not to say my method is a best practice but a quick one liner to get data to at least submit and close out the modal.
<div class="modal fade" id="myModal" ng-controller="SubmitCtrl">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<form ng-submit="submit()">
<input type="text" ng-model="name" />
<button type="submit" onclick="$('.modal').modal('hide')">Submit</button>
</form>
</div>
</div>
</div>
</div>
Perhaps open it with the service on click and have it close itself on the $destroy event?
$scope.openModal = function()
{
$scope.modal = $modal({
template: "user-login-modal.html",
container="body"
});
}
$scope.$on("$destroy", function()
{
if ($scope.modal)
{
$scope.modal.hide();
}
});
I have a angular controller which needs to reset whenever the user clicks outside the scope of the controller. How do I do this?
Sample html:
<div id='parent'>
<div id='1' ng-controller="ctrl1">
<!--other things-->
</div>
<div id='2' ng-controller="ctrl2">
<!--other things-->
</div>
</div>
<div id="parent2">
<!--other things-->
</div>
I want to be able to reset ctrl2 if a click occurs outside of ctr2 when the click occurs outside of div2
ctr2 has a reset function defined inside
If you are wanting a reset when the click happens within a sibling div, then the fact that the controllers share $scope should make that fairly straightforward. If you want to reset the div when a click happens anywhere else on the page, then you should set the "resetting" div as a directive, binding the $window object to a click handler:
app.directive('reset', function($window){
return {
template: '<div ng-class="{red: directiveToggler}">I\'m in 2' +
' - click me to turn red, click anywhere else to turn me normal'+
'</div>',
controller: function($scope){
$scope.directiveToggler = true;
},
link: function(scope, element){
var w = angular.element($window);
w.bind('click', function(e){
if (e.target != element[0].children[0]){
scope.directiveToggler = false;
scope.$apply();
} else {
scope.directiveToggler = true;
scope.$apply()
}
})
}
}
})
Note that there are probably waaay better ways of handling the class/style changes than what I have set up, but the question was about click events ;).
Here's a plunk to demo
You can use the $rootScope to broadcast events to other controllers. See this JSFiddle: http://jsfiddle.net/simpulton/XqDxG/