I'm using AngularJS and AngularStrap, and I've been trying to create a popover that calls a function when a button is pushed and then if the function succeeds doing what it needs to do it automatically closes the popover. The popover inherits the parent scope, and the function I'm calling is on the parent scope, but the $hide function is not. I tried passing it via a parameter ng-click="vm.newAsUnitPriceRule(stagingItem, $hide), but that did not work, apparently you can't pass the $hide function, it just results in undefined when you step in to the function.
<div class="popover">
<a ng-click="$hide()"><small class="pull-right">X</small></a>
<div class="popover-content">
<button class="btn small newAsUnitPriceRule" ng-click="vm.newAsUnitPriceRule(stagingItem)">Pack As Unit Price</button>
<br>
<button class="btn small newPackAsSizeRule" ng-click="vm.newPackAsSizeRule(stagingItem)">Pack As Size Rule</button>
<br>
<button class="btn small newRule" ng-click="vm.newRule(stagingItem)">Custom Rule</button>
</div>
<div class="arrow"></div>
</div>
Related
I'm using angular-ui-router-uib-modal and I have a question on it.
When I close my modal (which confirm a successfull/failed operation), I need to reload page below (that show a list of data). As shown in the example below, I can specify that behavior in 'Close' button and also in 'X symbol' to close modal (with the ui-sref-opts="{reload: true}").
But... How can I specify the same operation when a user clicks outisde the modal and automatically closes the modal itself?
<div class="modal-content">
<div class="modal-header">
<div class="bb8-modal-close" ui-sref="home.gestioneFondi({gestione:true, innescatoDaMenuLaterale:false})" ui-sref-opts="{reload: true}">
<span class="visuallyhidden glyphicon glyphicon-remove-circle"/>
</div>
<h4 class="modal-title modal-title-font">Info</h4>
</div>
<div class="modal-body" ng-switch="esito">
<p class="text-center modal-body-font" ng-switch-when="true">Success</p>
<p class="text-center modal-body-font" ng-switch-when="false">Error</p>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ui-sref="home.gestioneFondi({gestione:true, innescatoDaMenuLaterale:false})" ui-sref-opts="{reload: true}">Chiudi</button>
</div>
</div>
Thank you for any help
So when you open a modal like this it is returning the promise:
var modalInstance = $modal.open({..});
you can specify the modal closing event on the promise
modalInstance.result.then(function (result) {..});
You can specify below code to reload the state.
$state.reload();
For above to work, you have to inject $state dependency in your controller.
app.controller('controller', ['$state',function($state){..}])
I am slowly advancing into angular. At this point I have form with several steps, each step is made of ng-form, since each step contains "continue" button and common headers I have following loop
<section ng-from="form12.{{step.id}}" ng-repeat="step in steps" id="{{step.id}}" ng-class="{active: currentSection == $index}">
<h1 class="header">{{$index + 1}}. {{step.title}}</h1>
<div class="content">
<ng-include src="step.template"></ng-include>
</div>
<!--and button code-->
<div class="content-body" ng-show="currentSection == $index">
<button ng-show="$index != 0" class="btn prev" ng-click="prevSection()">Previous</button>
<button class="btn next" ng-click="nextSection()" ng-disabled="step{{$index+1}}.$invalid">{{isLastStep($index)}}</button>
<div style="clear: both;"> </div>
</div>
</section>
So in that way I am not repeating same buttons code for each ng-form.
Before that I was using only ng-include and sections were hard coded, I suppose I am missing $scope now, as ng-include creates one as well as ng-repeat, could someone advise me on how can I make Continue button dependant on each ng-form validation result? (How can I access each individual ng-form results in topmost $scope?)
Each button has access to that form's $error, so you could have this for example:
<button class="btn next" ng-click="nextSection()" ng-disabled="form12.{{step.id}}.$invalid">
You also have ng-form spelled incorrectly (ng-from), although I assume that was an artifact from you pasting/typing in.
If you want to disable button if one of the forms is invalid
How can I access each individual ng-form results in topmost $scope?
You can wrap ng-repeat in ng-form and top ng-form will be invalid if any child form in ng-repeat is invalid.
Or if you wan't to block button per form then
<button class="btn next" ng-click="nextSection()" ng-disabled="form12.{{step.id}}.$invalid">{{isLastStep($index)}}</button>
My modal holds a form and I want to close the modal when the user clicks the submit button. The simplified form looks like this:
<div class='modal fade' id='{{ module.name }}Modal' role='dialog'>
<div class='modal-dialog modal-lg'>
<div class='modal-content'>
<form ng-submit='submitModule(module)'>
<div class='modal-body'>
...
</div>
<div class='modal-footer'>
<button type='submit' class='btn btn-primary'>Run</button>
<button type='button' class='btn btn-default' data-dismiss='modal'>Cancel</button>
</div>
</form>
</div>
</div>
You can see the two buttons. The close button uses data-dismiss='modal' which works fine. But I can't use that on the submit button, because that "cancels" out the ng-submit=submitModule() submission function; the modal will close but the function won't get called.
Would the solution be to close the modal from the submitModule() function? But how can I get a hold of the modal from there?
You can append as many method calls to the (ngSubmit) i.e
form class="well" (ngSubmit)="addUserModal.hide(); addUser(model); userForm.reset()" #userForm="ngForm"
You can add one small jQuery code in your HTML file...
Add onclick attribute in button.
<div class='modal fade' id='{{ module.name }}Modal' role='dialog'>
<div class='modal-dialog modal-lg'>
<div class='modal-content'>
<form ng-submit='submitModule(module)'>
<div class='modal-body'>
...
</div>
<div class='modal-footer'>
<button type='submit' class='btn btn-primary' onclick="$('.modal').modal('hide')">Run</button>
<button type='button' class='btn btn-default' data-dismiss='modal'>Cancel</button>
</div>
</form>
</div>
Use the Angular-UI library - Modal: download minified version here:
First include the library in your module:
angular.module('myModule', ['ui.bootstrap']);
Then, in your controller, you can close the modal within the form submit function:
$scope.submitModule = function(module) {
dialog.close(result);
// REST OF YOUR CODE TO HANDLE FORM INPUT
}
I create table using bootstrap and angular use object to display data. I want to open popup window to change object property by clicking row (and use angular binding in modal to work with object).
So my issue that i doesn't understand how to pass object from table to modal.
I found many examples with passing values and changing html on fly but in my case i want to use angular for binding and want to pass reference to object.
Sample of table:
<table class="table table-condensed table-bordered">
<thead>...</thead>
<tbody>
<tr ng-repeat="property in properties" data-toggle="modal" data-id="property" data-target="#editPropertyModal">
<td>{{property.name}}<td/>
<td>{{property.value}}<td/>
<td>...<td/>
</tr>
</tbody>
</table>
So by clicking this row i want to open modal and pass there property object and use controls like input, combobox to bind values via angular.
My sample of modal:
<div class="modal fade" id="editPropertyModal" tabindex="-1" role="dialog" aria-labelledby="editPropertyModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="editPropertyModalLabel">Property details</h4>
</div>
<div class="modal-body">
{{currentProperty.name}} - {{currentProperty.value}}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
My try to pass property via javascript:
$(document).on("click", ".open-editPropertyModal", function (e) {
e.preventDefault();
var _self = $(this);
var property = _self.data('id');
$("#currentProperty").val(property);
$(_self.attr('href')).modal('show');
});
Doesn't work.
You can use this to do that. It really helped me.
Default Bootstrap JavaScript is not working well with angular, because it makes changes in DOM model outside AngularJS. Please consider using native directives for bootstrap, like these http://mgcrea.github.io/angular-strap/
Also, for maximum simplicity, in many cases, you can use something like this plugin https://github.com/cgross/angular-prompt. It depends on bootstrap and gives you simple API based on promises.
prompt({
title: 'Give me a name',
message: 'What would you like to name it?',
input: true,
label: 'Name',
value: 'Current name',
}).then(function(name){
//name contains new value
});
Callback passed to then will be executed after clicking "OK" in popup.
I have an Angular app that displays a ui.bootstrap.modal dialog when I click on a certain element. I want to make the modal logic reusable so have separated it into a separate controller. The result (simplified) looks like this:
<div ng-controller="MyController">
<button class="btn" ng-click="open()">Open me!</button>
<div ng-controller="ModalController" modal="shouldBeOpen" close="close()" options="opts">
...
</div>
</div>
The visibility of the modal is controlled by a property on ModalController:
$scope.shouldBeOpen = true;
How can I set that property from the open() method on MyController?