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
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.
ng-show and ng-hide are not working properly. In my controller I have
$scope.isHide=true; It is working. But $scope is not updating when it changes the value inside the nested function. Code description is as follows,
$scope.isHide=true //It works
$scope.productdetails = function (size,selectedproduct)
{
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: '/Selection_Routing/Selection_Product/ProductDetails.html',
controller: function ($scope, $uibModalInstance, product) {
$scope.product = product;
$scope.buy = function (path) {
$uibModalInstance.close($scope.product);
$location.path(path);
$scope.isHide= false; // Not working
};
},
});
};
I think what you miss here is to pass the current $scope to your modal,
Please try the following:
$scope.isHide=true;
$scope.productdetails = function (size,selectedproduct)
{
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: '/Selection_Routing/Selection_Product/ProductDetails.html',
scope: $scope, //passed current scope to the modal
controller: function ($scope, $uibModalInstance, product) {
$scope.product = product;
$scope.buy = function (path) {
$uibModalInstance.close($scope.product);
$location.path(path);
$scope.isHide= false;
};
},
});
};
Maybe if binded property is a object instead a primitive its works
$scope.isHide= {value:true};
$scope.productdetails = function (size,selectedproduct)
{
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: '/Selection_Routing/Selection_Product/ProductDetails.html',
scope: $scope, //passed current scope to the modal
controller: function ($scope, $uibModalInstance, product) {
$scope.product = product;
$scope.buy = function (path) {
$uibModalInstance.close($scope.product);
$location.path(path);
$scope.isHide.value= false;
};
},
});
};
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');
};
});
I am using a bootstrap modal
Controller.js -
$scope.open = function() {
var modalInstance = $modal.open({
animation: true,
templateUrl: 'views/template.html',
controller: 'controller2',
resolve: {
items: function() {
return $scope.values;
}
}
});
modalInstance.result.then(function(values) {
$scope.new_value = values;
}, function() {
});
};
I don't want to create a new controller since the modal should show values which are constantly changing in the current controller. What should I pass in place of controller2 if I modal to be in the same controller?
You could use the scope option instead of the controller:
$scope.open = function() {
var modalInstance = $modal.open({
animation: true,
templateUrl: 'views/template.html',
scope: $scope,
resolve: {
items: function() {
return $scope.values;
}
}
});
modalInstance.result.then(function(values) {
$scope.new_value = values;
}, function() {
});
};
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