I have to pass some data from a get to a Modal window, by eg. I use "item" for "response.data.item"...
$http.get(link).then(function (response) {
var modalInstance = $uibModal.open({
templateUrl: 'newsModal.html',
controller: 'NewsModalInstanceCtrl',
resolve: {
item: function () {
return response.data.item; // !! response undefined
}
}
});
My problem is that the "response" is "undefined"... what is the right way to pass that parameter to the modal?
Edit:
Is there another way that passing the $scope to the Modal controller...?
I would like to have only the moldal information in the modal window, not all the response data from the link...
It should be like this
var modalInstance = $uibModal.open({
templateUrl: 'newsModal.html',
controller: 'NewsModalInstanceCtrl',
resolve: {
item: function () {
$http.get(link).then(function (response) {
return response.data.item;
}
}
});
I believe you have to pass it into the function
$http.get(link).then(function (response) {
var modalInstance = $uibModal.open({
templateUrl: 'newsModal.html',
controller: 'NewsModalInstanceCtrl',
resolve: {
item: function (response) {
return response.data.item;
}
}
});
However, I have not tested this code.
Related
I'm trying to find out how to trigger .opened() for my modal. What I want to happen is, after all the data is loaded in my modal, I would like to .opened() to be triggered. I am aware that opened() is triggered when the modal is already opened, is there a way to change that, like maybe only trigger it after I have initialized the values in my controller?
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl'
});
modalInstance.opened.finally(function() {
doSomething();
});
asdas
angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $modalInstance, items) {
init();
function init() {
// do initializations here....
// then resolve the opened() function... but how?
}
$scope.ok = function () {
$modalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});
Just pass object with 'onOpen' function:
$scope.ctrl = {
onOpen: function() {
console.log('open!');
}
};
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
ctrl: function () {
return $scope.ctrl;
}
}
});
and then:
function init() {
ctrl.onOpen();
}
http://plnkr.co/edit/wxwkV1cjT1gO8xGZDVgm?p=preview
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', ...
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.