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');
};
});
Related
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.
I have a page controller on my site that includes several modals. Some of the modal controllers are getting robust, and I would like to move them into separate controllers without losing the scope of the outer page controller (the modal controller uses some of the page controllers functions and properties) - is this possible? So far I am getting errors to anything which references the outer controller. Here is a simple example of how I have it set up:
the page controller:
angular.module('myApp')
.controller('outerCtrl', function(MetaService) {
var thisCtrl = this;
thisCtrl.someFunction = function() {
//some cool functionality that will elvaluate something
}
function optionsModal() {
var PageCtrl = thisCtrl;
$uibModal.open({
'controller': 'scripts/controllers/optionsModal.js',
'controllerAs': 'ModalCtrl',
'templateUrl': 'views/modals/optionsModal.html',
'size': 'md'
});
}
});
the modal controller:
angular.module('myApp')
.controller('optionsModalCtrl', function(MetaService) {
var modalCtrl = this;
function giveOptions() {
if (PageCtrl.someFunction()) {
//offer some option
} else {
//offer a different option
}
}
});
Here is the example from official page:
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
scope: $scope, // pass parent scope to modal instance
resolve: {
items: function () {
return $scope.items;
}
}
});
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 wanted to define a custom scope for the modal (I don't want to use dependency injection for reasons) I am using in my project, but I'm getting an error whenever I define a scope in $modal.open. Here is the plunk I created from the example on AngularUI's website: http://plnkr.co/edit/rbtbpyqG7L39q1qYdHns
I tried debugging and saw that (modalOptions.scope || $rootScope) returns true with a custom scope and since true (obviously) doesn't have a $new() function defined, an exception is thrown.
Any thoughts?
You'll have to pass a scope instance:
var modalInstance = $modal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function () {
return $scope.items;
}
},
scope: $scope
});
You can also pass your own custom scope if you don't want to use the controller's scope, working plnkr:
http://plnkr.co/edit/1GJTuVn45FgPC3jIgyHv?p=preview
First Way
To pass a variable to a modal you can do it in this way
var modalInstance = $modal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function () {
return $scope.items;
},
test: function(){
return $scope.test; //This is the way
}
}
});
In your modal you have this
angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $modalInstance, items, test) {
$scope.items = items;
$scope.test = test; // And here you have your variable in your modal
console.log("Test: " + $scope.test)
$scope.selected = {
item: $scope.items[0]
};
$scope.ok = function () {
$modalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});
Here you have your own example in Plunker
Second Way
var modalInstance = $modal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
scope: $scope, // In this way
resolve: {
items: function () {
return $scope.items;
}
}
});
angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $modalInstance, items) {
$scope.items = items;
//You have available test and hello in modal
console.log("Test 1: " + $scope.test);
console.log("Test 2: " + $scope.hello);
$scope.selected = {
item: $scope.items[0]
};
$scope.ok = function () {
$modalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});
Plunker of the second way