Can I pass the value for the appendTo parameter to the angular bootstrap function $uibModal.open() ?
Something like this:
var options;
options.appendElement = $document.find('aside-box').eq(0);
return $uibModal.open(options);
You should use the attribute resolve
$uibModal.open({
templateUrl: 'modaltemplate.tpl.html',
controller: 'ModalCtrl',
controllerAs: 'modalCtrl',
resolve: {
myparameter: function() {
return 'teste param';
}
});
var ModalCtrl = function(myparameter, $modalInstance) {
console.log(myparameter);
}
angular
.module('myApp')
.controller('ModalCtrl', ModalCtrl)
Related
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 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');
};
});
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',
...
});
var modalInstance = $modal.open({
templateUrl: 'views/modals/addDevice.html',
controller: ModalCtrl
});
modalInstance.result.then(function (newDevice) {
});
I will implement it in this way:
app.controller("ModalCtrl", function( $scope, $modalInstance ) {
});
But only this way is accepted:
var ModalCtrl = function ($scope, $modalInstance) {
};
Why this happens?
When registering a controller the following way:
app.controller("ModalCtrl", function( $scope, $modalInstance ) {
});
You haven't declared a ModalCtrl variable so in the following case ModalCtrl would be undefined:
var modalInstance = $modal.open({
templateUrl: 'views/modals/addDevice.html',
controller: ModalCtrl
});
You can provide the controller name as a string instead:
var modalInstance = $modal.open({
templateUrl: 'views/modals/addDevice.html',
controller: 'ModalCtrl'
});
I think you are having issues because the value for your controller name needs to be in quotes -
var modalInstance = $modal.open({
templateUrl: 'views/modals/addDevice.html',
controller: 'ModalCtrl' // <-- this needs to be in quotes
});
This is defining your controller class:
var ModalCtrl = function ($scope, $modalInstance) {
};
you need to create an instance of the class:
var instance = new ModalCtrl(args)
Use cotes for the controller name. That will work fine.