Save Form data from Popover in Angularjs - angularjs

var App = angular.module('myApp', []);
App.controller('myPopoverCtrl',
function($scope){
$scope.myPopover = {
isOpen: false,
open: function open() {
$scope.myPopover.isOpen = true;
},
close: function close() {
// alert('hi');
$scope.myPopover.isOpen = false;
}
};
$scope.SaveNotes = function() {
console.log('hi');
console.log($scope.noteText);
//getting undefined here
return false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app = "App">
<a uib-popover-template="'AddNote.html'"
popover-title="AddNote"
popover-trigger="'outsideClick'"
ng-controller="myPopoverCtrl"
popover-is-open="myPopover.isOpen"
ng-click="myPopover.open()">Add
</a>
</div>
<script type="text/ng-template" id="AddNote.html">
<div>
<textarea class="form-control height-auto"
ng-model="noteText"
placeholder="This is a new note" ></textarea>
<input class="btn btn-outline btn-primary"
type="button"
ng- click="SaveNotes();" value="Save">
</div>
</script>
I have web a page where i have a button and when click the button popover appears.In that popover i have textarea but when i click save button i want get the text in my controller but i am getting undefined using $scope.modelname
How can i get that data?

I think you want to use a modal rather than a popover like so, as a popover is really just to display text :-
var modalInstance = $modal.open({
animation: $rootScope.animationsEnabled,
templateUrl: 'views/myTemplate.html',
size: 'md'
}).result.then(function(result) {
$scope.result = result;
});
This is what it's designed for more info here.

Related

Is there any way to use $uibModal and $uibModalInstance in a single controller to implement modal popup using angular with typescript?

As I am a newbie in angular with typescript I am facing a issue while implemented angular modal popup. The issue is I have one drop-down on which change I have to open a modal popup and that modal popup will have two buttons "Yes" or "No". For this I have one controller where I have injected a dependency.
export class QuestionnaireController {
static ngControllerName = 'questionnaireController';
static inject = ["$uibModal"];
constructor(private $uibModal: ng.ui.bootstrap.IModalService) {
}
public openModalPopup() {
let options: ng.ui.bootstrap.IModalSettings = {
controller: QuestionnaireController,
controllerAs:'ctrl',
templateUrl: 'app/views/Dialogbox.html',
};
this.$uibModal.open(options);
}
}
Most of my code is written in 'QuestionnaireController' and the popup is getting open using this controller but I also want to close this popup so I read a article where it was written that I have to created a new controller "ModalController " to make popup close.
export class ModalController {
static inject = ["$uibModalInstance"];
constructor(private $uibModalInstance: ng.ui.bootstrap.IModalServiceInstance) {
}
public close() {
this.$uibModalInstance.close();
}
}
Popup code is here...
<div ng-app="" id="dvModal">
<div class="modal-header">
</div>
<div class="modal-body">
<p> Evaluated result will be discarded if you continue. Are you sure you want to continue?</p>
</div>
<div class="modal-footer">
<input id="yesBtn" type="button" class="btn btn-default" ng-click="ctrl.Yes('true')" value="Yes" />
<input id="npBtn" type="button" class="btn btn-default" ng-click="ctrl.close()" value="No" />
</div>
and to close this passed Controller : ModalController in options which makes my popup closed on click of "No". But now the issue is generated here, how I again went to "QuestionnaireController" to do "Yes" functionality as "Yes" functionality is written in QuestionnaireController.
Yes, you can!
$uibModal is super flexible tool.
I'm not super familiar with Typescript, but here's my JS solution:
angular
.module('appName', ['ui.bootstrap'])
.controller('SomePageController', ['$scope', '$uibModal', '$log',
function ($scope, $uibModal, $log) {
First you want to do, is to change your openModalPopup() method:
// Instantiate the modal window
var modalPopup = function () {
return $scope.modalInstance = $uibModal.open({
templateUrl: 'blocks/modal/dialog.html',
scope: $scope
});
};
// Modal window popup trigger
$scope.openModalPopup = function () {
modalPopup().result
.then(function (data) {
$scope.handleSuccess(data);
})
.then(null, function (reason) {
$scope.handleDismiss(reason);
});
};
// Close the modal if Yes button click
$scope.yes = function () {
$scope.modalInstance.close('Yes Button Clicked')
};
// Dismiss the modal if No button click
$scope.no = function () {
$scope.modalInstance.dismiss('No Button Clicked')
};
// Log Success message
$scope.handleSuccess = function (data) {
$log.info('Modal closed: ' + data);
};
// Log Dismiss message
$scope.handleDismiss = function (reason) {
$log.info('Modal dismissed: ' + reason);
}
}
]);
Second - modal window HTML template will look like this:
<script type="text/ng-template" id="blocks/modal/dialog.html">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
Modal content
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="yes()">Yes</button>
<button class="btn btn-warning" type="button" ng-click="no()">No</button>
</div>
</script>
Third - pretty simple SomePage HTML (in your case - Questionnaire) View example :
<div ng-controller="SomePageController">
<button type="button" class="btn btn-default" ng-click="openModalPopup()">Open modal</button>
</div>
All together:
angular
.module('appName', ['ui.bootstrap'])
.controller('SomePageController', ['$scope', '$uibModal', '$log',
function($scope, $uibModal, $log) {
$scope.modalPopup = function() {
modal = $uibModal.open({
templateUrl: 'blocks/modal/dialog.html',
scope: $scope
});
$scope.modalInstance = modal;
return modal.result
};
$scope.modalPopupTrigger = function() {
$scope.modalPopup()
.then(function(data) {
$scope.handleSuccess(data);
},function(reason) {
$scope.handleDismiss(reason);
});
};
$scope.yes = function() {
$scope.modalInstance.close('Yes Button Clicked')
};
$scope.no = function() {
$scope.modalInstance.dismiss('No Button Clicked')
};
$scope.handleSuccess = function(data) {
$log.info('Modal closed: ' + data);
};
$scope.handleDismiss = function(reason) {
$log.info('Modal dismissed: ' + reason);
}
}
]);
<!DOCTYPE html>
<html>
<head>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body ng-app="appName">
<div ng-controller="SomePageController">
<script type="text/ng-template" id="blocks/modal/dialog.html">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
Modal content
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="yes()">Yes</button>
<button class="btn btn-warning" type="button" ng-click="no()">No</button>
</div>
</script>
<button type="button" class="btn btn-default" ng-click="modalPopupTrigger()">Open modal</button>
</div>
<script src="https://code.angularjs.org/1.5.7/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.7/angular-animate.min.js"></script>
<script src="https://raw.githubusercontent.com/angular-ui/bootstrap-bower/master/ui-bootstrap-tpls.min.js"></script>
</body>
</html>
Well, if you are that lazy guy like me, the following will also work ;)
var objects = [{
name: "obj1",
value: 1
}, {
name: "obj2",
value: 2
}];
// Generating the modal html
var html = "<div class='modal-header'><h4 class='modal-title'>Select Object</h4></div>";
html += "<div class='modal-body'>";
html += "<select class='form-control' ng-model='selection'>";
for (var i = 0; i < objects.length; i++) {
var ob = objects[i];
html += "<option value='" + ob.value + "'>" + ob.name + "</option>";
}
html += "</select>";
html += "</div>";
html += "<div class='modal-footer'>";
html += '<button type="button" ng-click="dismissModal()" class="btn btn-default" >Close</button>';
html += '<button type="button" ng-click="closeModal()" class="btn btn-primary">Select</button>';
html += "</div>";
// Showing the modal
var objectSelectionModal = $uibModal.open({
template: html,
controller: function($scope) {
// The function that is called for modal closing (positive button)
$scope.closeModal = function() {
//Closing the model with result
objectSelectionModal.close($scope.selection);
};
//The function that is called for modal dismissal(negative button)
$scope.dismissModal = function() {
objectSelectionModal.dismiss();
};
}
});
//Processing the Result
objectSelectionModal.result.then(function(selected) {
alert(selected);
});

How to stop displaying angular tooltip on focus/click?

I have a field which on blur displays a tooltip. But I don't know why it also pops up when I click on the field.
Here is the codepen example: http://codepen.io/Octtavius/pen/aZzyKw?editors=1010
Below is the code where I use angular bootstrap:
<body ng-app="ui.bootstrap.demo" class='container'>
<input type="text"
ng-controller="myPopoverCtrl"
popover-template="myPopover.templateUrl"
popover-title="This is a popover"
popover-placement="bottom"
popover-is-open="myPopover.isOpen"
ng-blur="myPopover.open()" />
<script type="text/ng-template" id="myPopoverTemplate.html">
<h2 ng-bind="myPopover.data"/>
<button class="btn btn-success" ng-click="myPopover.close()">
Close me!
</button>
</script>
</body>
Controller
app = angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
app.controller(
'myPopoverCtrl', ['$scope', function($scope) {
// query popover
$scope.myPopover = {
isOpen: false,
templateUrl: 'myPopoverTemplate.html',
open: function open() {
$scope.myPopover.isOpen = true;
$scope.myPopover.data = 'Hello!';
},
close: function close() {
$scope.myPopover.isOpen = false;
}
};
}
]);
Can anyone help to understand why the tooltip popup on click when I set it to popup on blur/when leave the field???
That's because default trigger for popover is click: https://angular-ui.github.io/bootstrap/#/popover.
Try to disable it by popover-trigger="none"

Unable to make angular-formly work within a ng-template of an angular-ui-bootstrap modal

I am using angular-formly to build a form inside an angular-ui-bootstrap modal, the following code works when the form is placed outside the modal template but it doesn't when placed inside the ng-template, it just doesn't print the fields at all.
I believe this should work but I don't know how the life-cycle of angular-formly runs, so I am unable to identify how to make the fields show up inside my bootstrap modal template.
The issue is clearly related to the ng-template, it appears not to render the form even if the fields array is passed correctly.
var app = angular.module("demo", ['dndLists', 'ui.bootstrap', 'formly', 'formlyBootstrap']);
app.controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, items, User) {
var vm = this;
vm.loadingData = User.getUserData().then(function(result) {
vm.model = result[0];
vm.fields = result[1];
vm.originalFields = angular.copy(vm.fields);
console.log(vm);
});
});
app.controller("AdvancedDemoController", function($scope, $uibModal){
$scope.modalOpen = function(event, index, item){
var modalInstance = $uibModal.open({
animation: true,
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: 'md',
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
});
In my view:
<!-- Template for a modal -->
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
<div ng-if="vm.loadingData.$$state.status === 0" style="margin:20px 0;font-size:2em">
<strong>Loading...</strong>
</div>
<div ng-if="vm.loadingData.$$status.state !== 0">
<form ng-submit="vm.onSubmit()" novalidate>
<formly-form model="vm.model" fields="vm.fields" form="vm.form">
<button type="submit" class="btn btn-primary submit-button">Submit</button>
</formly-form>
</form>
</div>
<ul>
<li ng-repeat="item in items">
{{ item }}
</li>
</ul>
Selected: <b>{{ selected.item }}</b>
</div>
</script>
Any ideas?
When calling $uibModal.open you need to specify controllerAs: 'vm' (that's what you're template assumes the controller is defined as).

Angular modal- the modal is displayed from the start and I can't hide it

I am new to angular js
I have to open a modal dialog which display some selected value.
Open Modal
<div modal="showModal" close="cancel()">
<div class="modal-header">
<h4>Modal Dialog</h4>
</div>
<div class="modal-body">
<p>E{{inputValue}}</p>
</div>
<div class="modal-footer">
<button class="btn btn-success" ng-click="ok()">Okay</button>
<button class="btn" ng-click="cancel()">Cancel</button>
</div>
</div>
The controller for the module which contain the modal is:
var app = angular.module('myApp', ['ui.bootstrap.modal']);
app.controller('ctrlTags', function($scope){
$scope.inputValue=$('input:checked').val()
$scope.open = function() {
$scope.showModal = true;
return $scope.inputValue;
};
$scope.ok = function() {
$scope.showModal = false;
};
$scope.cancel = function() {
$scope.showModal = false;
};
});
For some reason the modal is displayed as is it is a regular part of the page (doesn't function as a modal)
Toggling a boolean is not how ui-boostrap modals are opened. See documentation. Basically you have to call $uibModal.open with a template:
$scope.open = function() {
var modalInstance = $uibModal.open({
templateUrl: 'myModal.html',
controller: 'ModalInstanceCtrl'
});
}
Have a look at this plunker where I'm passing a value to the modal, through the resolve property of $uibModal.open.

Bind values to UI Bootstrap Modal

I have a table with a view button, when view is clicked modal display but now I want to display certain data on the modal. I am using .html pages.
I am not sure what am I missing here
html
<td>
<span>
<input class="btn btn-sm btn-dark" data-ng-click="launch('create',client)" type="button" value="view" />
</span>
</td>
This will luanch the modal
Modal
<div class="modal fade in" ng-controller="dialogServiceTest">
<div class="modal ng-scope">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">
<span class="glyphicon glyphicon-star"></span> Client Details
</h4>
</div><div class="modal-body">
<ng-form name="nameDialog" novalidate="" role="form" class="ng-pristine ng-invalid ng-invalid-required">
<div class="form-group input-group-lg" ng-class="{true: 'has-error'}[nameDialog.username.$dirty && nameDialog.username.$invalid]">
<label class="control-label" for="username">Name:</label>
<input type="text" name="username" id="username" ng-model="client.ClientName" ng-keyup="hitEnter($event)" required="">
<span class="help-block">Enter your full name, first & last.</span>
</div>
<div>{{client.ClientName}}</div>
</ng-form>
</div><div class="modal-footer">
<button type="button" class="btn btn-default" ng-click="cancel()">Cancel</button>
<button type="button" class="btn btn-primary" ng-click="save()" ng-disabled="(nameDialog.$dirty && nameDialog.$invalid) || nameDialog.$pristine" disabled="disabled">Save</button>
</div>
</div>
</div>
</div>
Angular
angular.module('modalTest', ['ngRoute','ui.bootstrap', 'dialogs'])
.controller('dialogServiceTest', function ($scope,$http, $rootScope, $timeout, $dialogs) {
$scope.clients = []; //Array of client objetcs
$scope.client = {}; //Single client object
$scope.launch = function (which,client) {
var dlg = null;
alert(client.ClientName);
dlg = $dialogs.create('/templates/Modal.html', 'whatsYourNameCtrl', {}, { key: false, back: 'static' });
dlg.result.then(function () {
$scope.client.ClientName = client.ClientName;
});
})
.run(['$templateCache', function ($templateCache) {
$templateCache.put('/templates/Modal.html');
}]);
here is some of my code
$scope.showScreenSizePicker = function(){
$scope.actionmsg = "";
var modalWindow = $modal.open({
templateUrl: '{{url()}}/modals/modalScreenSizePicker',
controller: 'modalScreenSizePickerController',
resolve: {
titletext: function() {return "Screen Sizes: ";},
oktext: function() {return "Close";},
canceltext: function() {return "Cancel";},
labeltext: function() {return "";},
}});
modalWindow.result.then(function(returnParams) {
$scope.setViewSize(returnParams[0], returnParams[1]);
});
}
you can see i am passing variables into modal using resolve. If you want to pass values back from the modal you can grab the variable returnParms (array)
and here is my controller code:
angular.module('myWebApp').controller('modalScreenSizePickerController', function($scope, $modalInstance, titletext, labeltext, oktext, canceltext) {
$scope.titletext = titletext;
$scope.labeltext = labeltext;
$scope.oktext = oktext;
$scope.canceltext = canceltext;
$scope.customHeight = 800;
$scope.customWidth = 600;
$scope.selectCustomSize = function(width, height){
if (width < 100){ width = 100; }
if (height < 100){ height = 100; }
$scope.selectItem(width, height);
}
$scope.selectItem = function(width, height) {
var returnParams = [width, height];
$modalInstance.close(returnParams);
};
$scope.cancel = function() {
$modalInstance.dismiss();
};
});
hope my sample helps
I think what you are looking for is the resolve property you can use with the $modal service. I am not exactly sure which version of UI Bootstrap you are using, but the latest one works as follows:
var myModal = $modal.open({
templateUrl: '/some/view.html',
controller: 'SomeModalCtrl',
resolve: {
myInjectedObject: function() { return someObject; }
});
myModal.result.then(function(){
// closed
}, function(){
// dismissed
});
Then you can use the injected resolved value inside the modals controller:
app.controller('SomeModalCtrl', function ($scope, $modalInstance, myInjectedObject) {
// use myInjectedObject however you like, eg:
$scope.data = myInjectedObject;
});
You can acces the client in modal by using "$scope.$parent.client" - "$parent" give you $scope from witch the modal was open with all data.

Resources