I have one controller named controller1 which has bellow code to open modal dialog
var openDilaogBox = function () {
$scope.modalInstance = $modal.open({
templateUrl : 'templatepth here',
controller : controller2,
keyboard : false,
backdrop : false
});
}
I want to use controller2 for this modal dialog. Please help.
Just use the name of controller2. For example, if controller2's name is ModalCtrl, you can do it like this:
var openDialogBoxWithParams = function (param) {
var modalInstance = $modal.open({
templateUrl: '../path/to/modal.html',
controller: 'ModalCtrl',
scope: $scope,
resolve: { Param: function () { return param } }
});
modalInstance.result.then(function (returnValue) {
$scope.someData = returnValue;
}, function () { });
};
Just make sure that ModalCtrl is injected to the app properly, i.e.
app.controller('ModalCtrl', ['$scope', ...
Related
The list is not updating when I trigger reload callback function after modal close.
// Inside my view
<div tasty-table
bind-resource-callback="showStudents.loadAllStudentsRecords"
bind-init="showStudents.init"
bind-reload="reloadCallback"
// Inside my controller
...
Other implementations here
...
vm.reloadCallback = function () { alert("Called"); };
vm.delete = function (studId) {
// Show modal
var modalInstance = $uibModal.open({
templateUrl: 'AppScripts/Views/Student/DeleteStudent.html',
controller: 'DeleteStudentCtrl as deleteStudent',
backdrop : 'static',
keyboard : false,
resolve: {
studentId: function () {
return studId;
}
}
});
modalInstance.result.then(function (status) {
if (status === 'ok')
{
vm.reloadCallback();
}
});
The alert was executed when i call the reloadCallback function but the list is not updated
By the way im using "controller as" syntax.
Because of incomplete code i'm not able to understand which method you are using to close the modal window. Check working Plunkr here. Hope it will solve your problem. https://plnkr.co/edit/LnV021AjBXhamG8ygLp1?p=preview
var app = angular.module('plunker', ['ngAnimate','ui.bootstrap']);
app.controller('MainCtrl', function($scope, $uibModal) {
$scope.name = 'World';
$scope.studentId = "123"
$scope.reloadCallback = function(){
alert("Call back")
}
$scope.showModal = function(){
var modalInstance = $uibModal.open({
templateUrl: 'deletestudent.html',
controller: 'DeleteStudentCtrl as deleteStudent',
backdrop : 'static',
keyboard : false,
resolve: {
studentId: function () {
return $scope.studentId;
}
}
});
modalInstance.result.then(function (status) {
if (status === 'ok'){
$scope.reloadCallback();
}
});
}
});
app.controller('DeleteStudentCtrl', function($scope, $uibModalInstance, studentId) {
console.log(studentId);
$scope.closeMe = function(){
$uibModalInstance.close('ok');
}
})
Documentation for modal https://github.com/angular-ui/bootstrap/tree/master/src/modal/docs
I have set up a plunkr here:
http://plnkr.co/edit/NdHqQJ?p=preview
I'm trying to push and pull the form data into the modal window when you click on the task. I have read that you can do this with the "resolve" property (seen below) of the modal but I have been unable to get it to actually work. Any insight would be greatly appreciated.
var modalInstance = $modal.open({
templateUrl: 'editTask.html',
controller: 'ModalInstanceCtrl',
size: size,
scope: $scope,
resolve: {
items: function () {
return $scope.items;
}
}
});
Please let me know if you need more details!
If you want to use resolve (you can) the nit will be like this for example:
$scope.open = function(size, task) {
var modalInstance = $modal.open({
templateUrl: 'editTask.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
task: function() {
return task
}
}
});
};
HTML:
<a ng-click="open('lg', noStoneTask)" style="cursor:pointer" tooltip-placement="top" tooltip="Open Task">{{noStoneTask.taskSubject}}</a>
Demo: http://plnkr.co/edit/NA71479d04Yw7hh2Twx8?p=preview
You have to pass the scope you want to resolve (pass to the modal) in the resolve. and resolve it in the modal controller.
Is this what you want to achieve?
http://plnkr.co/edit/Q0G79C?p=preview
I modified the modal to pass the noStoneTasks scope to the modal
//modal
$scope.open = function (size) {
var modalInstance = $modal.open({
templateUrl: 'editTask.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
noStoneTasks: function () {
return $scope.noStoneTasks;
}
}
});
};
I also modify the scope when the user click ok.
uxModule.controller('ModalInstanceCtrl', function ($scope, $modalInstance, noStoneTasks) {
$scope.ok = function () {
noStoneTasks[0].actHours++;
$modalInstance.close('save');
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});
A very common question. help is really appreciated !!
i am not able to pass loginCtrl as a argument in SignupCtrl
Also if there is any proper way to do this please suggest
here is the code
$scope.loginCtrl = function ($scope, $modalInstance) {
$scope.cancelLogin = function () {
$modalInstance.dismiss('cancel');
}
};
$scope.signupCtrl = function ($scope, $modalInstance,loginCtrl){
$scope.close1=loginCtrl.cancelLogin;
$scope.cancelLogin = function () {
$modalInstance.dismiss('cancel');
}
};
Bind click event.
user.showModalDialog = function (item) {
var obj = {
selectedItem: item
};
_showModalDialog(obj);
};
_showModalDialog Method
var _showModalDialog = function (params) {
$modal.open({
templateUrl: "your html template URL",
backdrop: 'static',
windowClass: 'modal-width-50',
resolve: {
params: function () { return params; }
},
controller: function ($scope, $modalInstance, params) {
var user = params.selectedItem;
// you can receive your params here in params.
$scope.user=user;
}
Another way of doing this,
var _showModalDialog = function (params) {
$modal.open({
templateUrl: "your html template URL",
backdrop: 'static',
controller: _userCtrl,
windowClass: 'modal-width-50',
resolve: {
params: function () { return params; }
}});
its controller in the same file, its the inline controller, you can also make it in external file.
var _userCtrl = ['$scope', '$modalInstance', 'params', function ($scope, $modalInstance, params) {
var user = params.selectedItem;
// you can receive your params here in params.
$scope.user = user;
}];
Second approach is, you can pass data between two controllers by use of service.
i had to replace my md-dialog with an angular model UI bootstrap. in the md-dialog, i used the locals attribute to send anguler.copy, from the main controller into the dialog controller.
my question is, how do i get the same result with modal UI bootstrap?
md-dialog code (the old version)
$scope.notefullScreen=function(event){
$mdDialog.show({
controller: DialogNoteFullscreenController,
templateUrl: 'views/schedule/note-fullscreen.html',
targetEvent:event,
locals: {
editNote: angular.copy($scope.noteEdit),
editPtivacy:angular.copy($scope.privacyOptions),
detailsFull:$scope.details
}
}).then(function () {
}, function () {
});
modal ui code: ( in progress new version, what i have so far)
$scope.notefullScreenNew = function (event) {
var modalInstance = $modal.open({
templateUrl: 'views/schedule/schedule-extended-note-popup.html',
controller: ScheduleService.NotePopupCtrl,
targetEvent: event,
resolve: {
editNote: function () { return angular.copy($scope.noteEdit); },
editPtivacy: function() { return angular.copy($scope.privacyOptions); },
detailsFull: function(){return $scope.details;}
// locals: {
// editNote: angular.copy($scope.noteEdit),
// editPtivacy: angular.copy($scope.privacyOptions),
// detailsFull: $scope.details
// attachmentFull:angular.copy($scope.attachment)
}
});
modalInstance.result.then(function () {
}, function () {
});
};
angular-ui-bootstrap can resolve locals for the modal controller through the resolve attribute. These will then be available to your modal controller function as function parameters.
To adapt this to your scenario, it would become:
var modalInstance = $modal.open({
templateUrl: 'views/schedule/schedule-extended-note-popup.html',
controller: ScheduleService.NotePopupCtrl,
targetEvent: event,
resolve: {
editNote: function()( {
return angular.copy($scope.noteEdit);
},
editPtivacy: function() {
return angular.copy($scope.privacyOptions)
},
detailsFull: function() {
return $scope.details;
}
}
});
These will then be passed into your NotePopupCtrl as function parameters with the same name (just like the injections);
Sidenotes: I assume your attribute editPtivacy was supposed to be editPrivacy, also I don't think angular-ui-bootstrap supports the targetEvent attribute.
I have two controller, one using the UI Bootstrap modal. When using flat function (like) it works, but when I try and add them to my modules it does not work, giving an error: Unknown provider: ModalInstanceCtrlProvider <- ModalInstanceCtrl
What is the correct fashion to do this? Code follows:
angular.module( 'fb.controllers', [] ).controller( 'ModalInstanceCtrl', function( $scope, $modalInstance, data ) {
$scope.data = data;
$scope.ok = function () { $modalInstance.close(); };
$scope.cancel = function () { $modalInstance.dismiss(); };
});
angular.module( 'fb.controllers' ).controller( 'shortLinkModal', ['ModalInstanceCtrl', function( $scope, $modal, ModalInstanceCtrl ) {
$scope.open = function ( url, title ) {
var modalInstance = $modal.open( {
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
resolve: { data: function () { return { title: 'Short Link', url: url, bb: '[url=' + url + ']' + title + '[/url]' } } }
});
};
}]);
On further investigation, it appears that the controller: ModalInstanceCtrl part is expecting a function.
If you add your modal controller to module, you need to use string literal, like this
controller: 'ModalInstanceCtrl',
Controllers can't be injected into other controllers.
Simply pass the controller name, and the $modal.open() method will instantiate it:
var modalInstance = $modal.open( {
controller: 'ModalInstanceCtrl',
...
});