I want to update some value of a $modal in AngularJS but unable to understand how I can do this. Sample code is below:
var modalInstance;
function setupCall(data) {
var templateURL = 'partials/Chat.html';
var cssClass = 'medium-Modal';
modalInstance = $modal.open({
backdrop: "static",
keyboard: false,
backdropClick: false,
windowClass: cssClass,
templateUrl: templateURL,
controller: function ($scope, $modalInstance) {
$scope.updateStatus=function() {
...
}
}
});
modalInstance.result.then(function() {
});
}
// first time i call this function to open model
setupCall(event);
Now when model open successfully and if I received some update from service and I again want to show updated values in a model then how I can call updateStatus() from outside the model. I try to using
modalInstance.updateStatus(..) but it is not working. Can someone tell me a proper way to do this?
You can pass a scope option to $modal, and then use AngularJS events
var modalScope = $rootScope.$new();
myService.doSomethingAsync(function (data) {
$rootScope.$emit('some event', data);
});
$modal.open({
scope: modalScope,
controller: function ($scope) {
/* ... */
$scope.$on('some event', function() {
$scope.updateStatus();
});
}
});
You can use $broadcast to call that method. For example, after you received update from your service in your view's controller (where you are calling setupCall or launching the modal), do this:
$rootScope.$broadcast("dataUpdatedFoo", {newData: "bar"));
Now, inside your controller of modal, register a listener for this:
$scope.$on("dataUpdatedFoo", function(e, data) {
$scope.updateStatus();
});
Thanks everyone. I resolve this by adding custom eventlistener.
var listeners = [];
function _addEventListener(listener) {
listeners.push(listener);
return listener;
}
function _removeListener(listener) {
for (var i=0; i < listeners.length; i++){
if (listeners[i] === listener){
listeners.splice(i, 1);
break;
}
}
}
function setupCall(data) {
......
modalInstance = $modal.open({
backdrop: "static",
keyboard: false,
backdropClick: false,
windowClass: cssClass,
templateUrl: templateURL,
controller: function ($scope, $modalInstance) {
var listener = _addEventListener(function (event) {
$log.info("chat msg: "+JSON.stringify(event));
});
$scope.$on('destroy', function () {
_removeListener(listener)
});
...
Related
I want to use same modal window with different parent controller, the only difference in modal controller is separate factories that i am calling e.g Ctrl-1-Factory.getServerFiles so similarly i want to call Ctrl-2-Factory when modal populated for Ctrl2.
ModalCtrl.js
angular.module('App').controller('ServerFilesCtrl', function($scope, $rootScope, FileSaver, $uibModalInstance, Ctrl-1-Factory, $uibModal) {
'use strict';
$scope.cancel = function() {
$uibModalInstance.close();
}
Ctrl-1-Factory.getServerFiles().then(function(response) {
$scope.data = response.data;
console.log($scope.data);
});
});
Ctrl-1.js
$scope.modalInstance = $uibModal.open({
templateUrl: '/web/global/modal.html',
controller:'ModalController'
});
Ctrl-2.js
$scope.modalInstance = $uibModal.open({
templateUrl: '/web/global/modal.html',
controller:'ModalController'
});
You can wrap it in a service method.
angular.module('App').factory('FilesModal', function() {
return {
openModal: openModal
};
function openModal() {
return $uibModal.open({
templateUrl: '/web/global/modal.html',
controller: 'ModalController'
});
}
});
angular.module('App').controller('Ctrl1', function(FilesModal) {
$scope.someEventFunction = someEventFunction;
function someEventFunction() {
$scope.modalInstance = FilesModal.openModal();
}
});
Pass in arguments as needed to make it more robust
Like we pass params through modal, as did in below by resolve example :
$scope.someFunction = function(item) {
item.root = true;
modalInstance = $uibModal.open({
animation: true,
controller: 'newController',
templateUrl: '/views/modals/somePage.html',
resolve: {
params: function () {
return { item: item};
}
}
});
};
I am not sure how to pass params in ionicModal ??
$ionicModal.fromTemplateUrl('main/templates/viewPage.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.modal = modal;
});
Is there an option along with animation as in above ionicModal code?
Help is much appreciated!
You do not need to pass any data. Your parent scope is already passed as
scope : $scope
So you can take your data as scope.item.
Please follow this URL
https://forum.ionicframework.com/t/how-to-pass-data-from-parent-controller-to-ionicmodal/2030/2
When I am trying to open a modal on ng-click the scipe variables is getting lost.
var modalInstance = $modal.open({
templateUrl: 'partials/create.html',
controller: 'AppCreateCtrl',
scope: $scope // <-- I added this
});
You should pass data using the resolve property like this:
var modalInstance = $modal.open({
templateUrl: templateSrv.templateUrl('partials/create.html'),
controller: modalBootstrap,
backdrop: 'static',
keyboard: false,
resolve: {
data: function () {
var result = {};
result.scope = $scope;
return result;
}
}
});
modalInstance.result.then(
function (dataPassedFromModalConroller) {
//this is called when the modal is closed
},
function (dataPassedFromModalConroller) { //Dismiss
//this is called when the modal is dismissed
}
);
Specify the controller for the modal instance like this (we do this in another file):
var modalBootstrap= function ($scope, $modalInstance, data) {
$scope.modalInstance = $modalInstance;
$scope.scope = data.userId;
};
modalBootstrap['$inject'] = ['$scope', '$modalInstance', 'data'];
Your modal template would look something like this:
<div ng-controller="AppCreateCtrl">modal content here</div>
I see many posts about posting many complicated things to ui-bootstrap modals, but I just want to pass a simple parameter so that I might use it to display different content in the dialog.
For example, I have the main document which has MyDocumentController as mydoc
In MyDocumentController is a function such as
_this.modals = {
inviteUser: function() {
$modal.open({
animation: true,
templateUrl: 'modules/templates/modals/modal-invite-user.html',
controller: 'UserInviteModalController as invite',
size: 'lg'
});
}, ...
And I call it in the main document like so, here is where I want to pass the param from:
<a href="" ng-click="users.modals.inviteUser(returningUser)">
And here is the controller for the modal:
(function() {
'use strict';
angular.module('mymodule')
.controller('UserInviteModalController', function($log, $modalInstance, toastr) {
var _this = this;
_this.someVar = HERE'S WHERE I WANT TO GET THE VALUE returningUser FROM THE NG-CLICK
_this.inviteDialog = {
close: function() {
$modalInstance.close();
},
resendInvite: function() {
toastr.success('A new invite has been sent.');
$modalInstance.close();
}
};
});
})();
What is the process for passing the simple param to the dialog's controller?
Try using resolve:
_this.modals = {
inviteUser: function(returningUser) {
$modal.open({
animation: true,
templateUrl: 'modules/templates/modals/modal-invite-user.html',
controller: 'UserInviteModalController as invite',
size: 'lg',
resolve: {
returningUser: function() {
return returningUser;
}
}
});
}, ...
And then inject it into your controller:
angular.module('mymodule')
.controller('UserInviteModalController', function($log, $modalInstance, toastr, returningUser) {
var _this = this;
_this.someVar = returningUser;
I'm trying to pass an object into a modal dialog in a bootstrap/angularJS using the code below. I did this in the style of the answer given at AngularJS UI Bootstrap modal is unable to perform functions from scope. When the modal form is supposed to open from a call to editGroup(), I get the following error:
Error: [$injector:unpr] Unknown provider: selGroupProvider <- selGroup
var EditGroupModalController = function ($scope, $modalInstance, selGroup) {
$scope.user = $sessionStorage.user;
$scope.selGroup = selGroup;
$scope.closeModal = function () {
$modalInstance.close();
};
};
$scope.editGroup = function (selGroup) { // "selGroup" receives the current Group object from $scope.groupList[]
$modal.open({
templateUrl: 'app/views/administration/advanced/editgroup.html',
controller: ['$scope', '$modalInstance','$modal','$sessionStorage','advancedService','selGroup', EditGroupModalController],
size: 'lg',
windowTemplateUrl:'app/views/partials/modaltemplatedraggable.html',
backdrop:'static',
resolve: {
item: function () {
return selGroup;
}
}
});
};
The official description of this error is here; however, I do not understand why I am receiving this error. Any help with this would be greatly appreciated.
Your controller's dependencies list doesn't match controller's function definition: in $modal.open you've listed six dependencies, while in function only three are present.
Dependencies are injected by resolve keys - in your case the key is item.
Necessary changes to your code in order to make it work:
Replace (1)
var EditGroupModalController = function ($scope, $modalInstance, selGroup)
with
var EditGroupModalController = function ($scope, $modalInstance, $modal, $sessionStorage, advancedService, selGroup)
And replace (2)
resolve: {
item: function () {
With
resolve: {
selGroup: function () {
You should name the variable in the resolve as 'selGroup' instead of 'item' so that it can be correctly injected.
Also, the names of the declared dependencies should match the function definition. I put together this simple demo.
angular.module('test', ['ui.bootstrap']).controller('TestController', function($scope, $modal) {
var sel = {name: "A group"};
var EditGroupModalController = function($scope, $modalInstance, selGroup) {
$scope.selGroup = selGroup;
$scope.closeModal = function() {
$modalInstance.close();
};
};
$scope.editGroup = function(selGroup) { // "selGroup" receives the current Group object from $scope.groupList[]
$modal.open({
template: '<div>Test {{selGroup.name}}</div>',
controller: ['$scope', '$modalInstance', 'selGroup', EditGroupModalController],
size: 'lg',
backdrop: 'static',
resolve: {
selGroup: function() {
return sel;
}
}
});
};
});
http://plnkr.co/edit/ec1PjkDZtf4yqINONnX5?p=preview