Passing modal data in AngularJS using controller as and vm - angularjs

I have a pair of controllers that looks like this:
(function () {
'use strict';
angular
.module('room')
.controller('RoomGetCtrl', Room)
.controller('TestCtrl', Test)
Room.$inject = [...'$uibModal'...];
Test.$inject = [...'$uibModalInstance'...];
function Room(..., $scope, $uibModal) {
var vm = this;
...
vm.open = function (size) {
vm.modalInstance = $uibModal.open({
templateUrl: 'modal.html',
controller: 'TestCtrl as vm',
});
};
}
function Test(???){
this.modalText = 'Modal Text'
this.modalCancel = function() {
???.dismiss();
}
}
})();
The view looks like this:
<script type="text/ng-template" id="modal.html">
<div class="modal-header">
<h3 class="modal-title">Modal window</h3>
</div>
<div class="modal-body">
<pre>{{ vm.modalText }}</pre>
</div>
<div class="modal-footer">
<button class="btn btn-default" ng-click="vm.modalCancel()">Cancel</button>
</div>
</script>
<button type="button" class="btn btn-default" ng-click="vm.open()">Open me!</button>
...
The above works, except that I'm unable to figure out what goes in the ??? in Test() above. I've tried a variety of things, whenever I click the cancel button, the console logs an error along the lines of "x.dismiss is not a function," where "x" is whatever I've tried use.
Any help?

Nevermind. I instantaneously worked it out myself (I swear, posting the question makes me think better). Anyway, here:
(function () {
'use strict';
angular
.module('room')
.controller('RoomGetCtrl', Room)
.controller('TestCtrl', Test)
Room.$inject = [...,'$uibModal'];
Test.$inject = [$uibModalInstance];
function Room(..., $uibModal) {
/*jshint validthis: true */
var vm = this;
...
vm.open = function () {
vm.modalInstance = $uibModal.open({
templateUrl: 'modal.html',
controller: 'TestCtrl as vm',
});
};
}
function Test($uibModalInstance){
this.modalText = 'Modal Text'
this.modalCancel = function() {
$uibModalInstance.dismiss();
}
}
})();
Really simple. $uibModalInstance.dismiss();. It was right there in the documentation
sigh

Related

Angularjs Confirmation Modal as Directive with action

I want to create angularjs directive mydialog wihc triggers the modal.Once the model is open I will have title and content,okcancel and confirm .Once the user click the confirm the corresponding action i.e. save should trigger .Here the save action is in MainCtrl .How to trigger that.
HTML Directive:
<my-dialog newmodal="alertModel" ></my-dialog>
ConfirmationDailog.html Code :
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" ng-click="$hide()">×</button>
<h4 class="modal-title">{{alertModel.Title}}</h4>
</div>
<div class="modal-body">
{{alertModel.Message}}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" ng-click="cancel()">Cancel</button>
<button type="button" class="btn btn-danger" ng-click="executeDialogAction(alertModel.action)">Confirm</button>
</div>
</div>
Below is the JS part :
var app = angular.module('plunker', ['ui.bootstrap']);
app.controller('MainCtrl', ['$scope', '$uibModal',
function ($scope,$uibModal) {
$scope.name = 'World';
var alertModel = {};
alertModel.Title = "My Title";
alertModel.Message = "The Conent";
alertModel.action= "save";
$scope.alertModel = alertModel;
$scope.save= function () {
alert('from outside');
}
}]);
my Dialog Directive that triggers the model
app.directive('myDialog', [
function () {
return {
scope: {
mymodal: '=newmodal',
},
template: "<button class='btn btn-danger' ng-lick='open(mymodal)'>Open Modal</button>",
controller: ModalController
};
}]);
function ModalController($uibModal, $log, $scope) {
$scope.animationsEnabled = true;
$scope.open = function (alertModel) {
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'ConfirmationDailog.html',
controller: ModalInstanceCtrl,
scope:$scope,
resolve: {
test: function () {
return alertModel;
}
},
size: 'lg'
});
modalInstance.result.then(function (selectedItem) {
console.log("Confirmed: " + selectedItem);
$scope.selectedItem = selectedItem;
}, function () {
$log.info('modal dismissed at: ' + new Date());
});
};
}
function ModalInstanceCtrl($scope, $uibModalInstance, test) {
console.log('in');
$scope.alertModel = test;
$scope.cancel = function () {
$scope.$dismiss();
}
$scope.executeDialogAction = function (action) {
if (typeof $scope[action] === "function") {
$scope[action]();
}
};
}

binding template view with uibmodal controller

I use uibmodal in one of my controller, and managed to pass data to the modal controller.
However, once the data has been passed in my modal controller, I can't figure out how to get this data rendered in the modal template.
My main controller:
doEdit = function () {
var modalScope = $scope.$new(false);
modalScope.roleModel = self.gridApiRoles.selection.getSelectedRows()[0];
var modalInstance = $uibModal.open({
templateUrl: 'views/dialog.html',
scope: modalScope,
windowTemplateUrl: 'template/flexModal.html',
backdrop: 'static',
resolve: {
roleModelScope: function () {
return modalScope.roleModel;
}
},
controller: ['$scope', '$rootScope', 'roleModelScope', DialogEditController],
controllerAs: 'ctrl'
});
modalScope.modalInstance = modalInstance;
modalInstance.result.then(
function close(result) {
console.info(result);
},
function dismiss() {
console.info("dialog dismissed");
}
);
}
};
My UibModal controller:
let DialogEditController = function ($scope, $rootScope, roleModelScope) {
let self = this;
self.$onInit = () => {
initTest();
};
let initTest = () => {
console.log(roleModelScope.name);
};
};
At this point, roleModelScope.name has been perfectly passed to the modal controller.
My template:
<div class="modal-dialog" style="width:900px; height:750">
<div class="modal-content">
<div class="modal-header bg-info">
</div>
<div class="modal-body">
{{roleModelScope.name}}
</div>
<div class="modal-footer">
</div>
</div>
</div>
I tried to use ctrl.roleModelScope but it didn't work neither.
Thank you for your answers.
Assign a roleModelScope value inside controller this(context), so that it will be available for binding on view.
Also your Modal controller alias is ctrl, use {{ctrl.roleModelScope.name}} inspite of {{roleModelScope.name}}.
<div class="modal-body">
{{ctrl.roleModelScope.name}}
</div>
Code
let initTest = () => {
this.roleModelScope = roleModelScope;
console.log(roleModelScope.name);
};

Angular bootstrap modal not working

I am working on angular application where I am displaying pop up message using bootstrap modal.
but its not displaying dynamic header text and body text.Pop up is showing but with blank header and body.
my main controller is as below
var requestUserController = function ($scope, $window, $uibModal, DataService) {
$scope.modalOptions = {
headerText: "",
bodyText: ""
}
var onServerError = function (data) {
$scope.modalOptions.headerText = "Error";
$scope.modalOptions.bodyText = data.statusText;
var serverModel = $uibModal.open({
templateUrl: window.serverUrl + 'app/ErrorMessages/PopUpErrorMessage.html',
controller: 'requestUserController',
scope: $scope
});
$scope.cancelForm = function () {
serverModel.close();
};
};
var onClientDataComplete = function (data) {
//window.hideProgress();
$scope.requestUser.clientDrp = data;
$scope.clientSelected = $scope.requestUser.clientDrp[0];
};
//window.showProgress();
DataService.getListofClients()
.then(onClientDataComplete, onServerError);
}
App.controller("requestUserController", ["$scope", "$window", "$uibModal", "DataService", requestUserController]);
and html for modal is
<div class="modal-header" ng-class="{true: 'alert-success', false: 'alert-danger'}[modalOptions.headerText == 'Success']">
<h3>{{modalOptions.headerText}}</h3>
</div>
<div class="modal-body">
<p>{{modalOptions.bodyText}}</p>
</div>
<div class="modal-footer">
<input type="button" class="btn icn-ok" value="Ok"
ng-click="cancelForm()" />
</div>
But pop up is showing blank header and body text
Remove loading of 'requestUserController' from your code and use the following code for open popup window
var serverModel = $uibModal.open({
templateUrl: window.serverUrl + 'app/ErrorMessages/PopUpErrorMessage.html',
scope: $scope
});

UI Bootstrap Modal within Directive

I'm using Angular 1.4.1 and UI Bootstrap 0.13.
I have a directive from which I'm opening a modal. The modal opens fine, but the buttons seemingly don't get bound to their handlers - they don't do anything. I've used this same code in another project just fine, except not from within a directive.
My directive:
(function () {
var app = angular.module('myApp');
app.directive('someDirective', function () {
return {
restrict: 'E',
templateUrl: 'SomeDirective.html',
scope: {
list1: '=list1',
list2: '=list2',
save: '&'
},
controller: ['$scope','$modal','myService', function ($scope,$modal,myService) {
$scope.openModal = function () {
var modalInstance = $modal.open({
templateUrl: 'ModalTemplate.html',
controller: 'modalController',
backdrop: 'static',
size: 'sm',
resolve: {
saveData: function () {
//do save action
}
}
});
modalInstance.result.then(
function (itemToSave) {
//save item
},
function () {
//Cancel
}
);
};
}]
}
});
}());
The modal's controller:
(function() {
var app = angular.module('myApp');
app.controller('modalController', [
'$scope', '$modalInstance', 'saveData',
function($scope, $modalInstance, saveData) {
$scope.saveData = saveData;
$scope.save = function() {
$modalInstance.close($scope.saveData);
};
$scope.cancel = function() {
$modalInstance.dismiss('cancel');
};
}
]);
}());
And the template for the modal content:
<div class="modal-header bg-info">
<h3 class="modal-title">Add New Record</h3>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form"></form>
</div>
<div class="modal-footer bg-info">
<button class="btn btn-primary" ng-click="save()">Save</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
My thought is that I'm having issues with scope, but I can't track it down. I have put break points on modalController. The app.controller() call happens when the app loads, I've seen that. But breakpoints within save() and cancel() never get hit.
Can someone help me figure out why the modal's buttons don't do anything?
This turned out to be a stupid mistake. At some point I apparently overwrote the name of one of the other controllers in my project with the same name of the controller I was using for the modal. The other controller did not have save() or cancel() methods so nothing was happening. As soon as I fixed my error and all controllers once again had their proper names this started working again.

AngularJS bootstrap modal scope value not displayed

I'm using angular bootstrap modal.
termsText is populated and the scope.productTerms does contain a value. But for some reason when I output {{ productTerms }} inside the modal the value is not being displayed. Why?
js
$scope.openProductTerms = function (termsText) {
$scope.productTerms = termsText <-- has a value in console.log()
var modalInstance = $modal.open({
templateUrl: 'myModalTerms.html',
controller: ModalInstanceCtrl
});
var ModalInstanceCtrl = function ($scope, $modalInstance) {
$scope.ok = function () {
$modalInstance.dismiss('OK');
};
};
html
{{ productTerms }} < ==== value shows outside modal
<script type="text/ng-template" id="myModalTerms.html">
<div class="modal-body">
{{ productTerms }} <==== same value does not show insdie modal?
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
</div>
</script>
The modal has a new controller and therefore a new scope.
services.js
angular.module('services',[]).
factory('sharedService', function($rootScope) {
var sharedService = {};
sharedService.value = null;
sharedService.prepForBroadcast = function(value) {
this.value = value;
this.broadcastItem();
};
sharedService.broadcastItem = function() {
$rootScope.$broadcast('shared');
};
return sharedService;
});
controller.js
$scope.openProductTerms = function (termsText) {
sharedService.prepForBroadcast(termsText);
var modalInstance = $modal.open({
templateUrl: 'myModalTerms.html',
controller: ModalInstanceCtrl
});
lastController.js
var ModalInstanceCtrl = function ($scope, $modalInstance,sharedService) {
$scope.$on('shared', function() {
$scope.productTerms = sharedService.value;
});
$scope.ok = function () {
$modalInstance.dismiss('OK');
};
};
Try using {{$parent.productTerms}} within your HTML
From my experience, it seems that the angular bootstrap modal creates a new scope. So by referencing $parent first, you'll be able to get your model's value.

Resources