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() {
});
};
Related
I try to open a modal with the uibModal (https://angular-ui.github.io/bootstrap/#!#%2Fmodal) but I want to have one modal with custom text inside.
i'm trying to open the modal like this :
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: '/crims/thermofluor/experiments/components/modal.html',
size: 'sm',
controller: 'ModalController',
resolve: {
content: function () {
return 'test';
}
}
});
With this controller :
angular
.module('thermofluor')
.controller('ModalController', ModalController)
ModalController.$inject = ['$uibModal', '$uibModalInstance'];
function ModalController($uibModal, $uibModalInstance, content) {
var $ctrl = this;
$ctrl.content = content;
$ctrl.ok = function () {
$uibModalInstance.close();
};
$ctrl.cancel = function () {
$uibModalInstance.dismiss();
};
}
But it seems not work, angular says that ModalController is not a function (in the modal opening ), so what can I do to get this works ?
Edit : I can do that without a ModalController :
$uibModal.open({
animation: true,
ariaLabelledBy: 'modal-title-bottom',
ariaDescribedBy: 'modal-body-bottom',
templateUrl: 'components/modal.html',
size: 'sm',
controller: function($scope) {
$scope.content = 'bottom';
}
});
But the buttons of my modal doesn't work
Edit
This finally works, here is how I do this :
function openModal(templateName, content, title){
var template = 'components/modal/'+templateName;
$uibModal.open({
animation: true,
ariaLabelledBy: 'modal-title-bottom',
ariaDescribedBy: 'modal-body-bottom',
templateUrl: template,
size: 'sm',
controllerAs: '$ctrl',
controller: function($scope, $uibModalInstance) {
$scope.content = content;
$scope.title = title;
var $ctrl = this;
$ctrl.ok = function () {
$uibModalInstance.close();
};
$ctrl.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
}
});
}
Finally I found a solution, here is what I do :
I create a service ModalService :
angular.module('myModule')
.factory('ModalService', ModalService);
ModalService.$inject = ['$uibModal'];
function ModalService($uibModal) {
return new ModalService();
function ModalService(){
var service = this;
function openModal(templateName, params){
var template = 'components/modal/'+templateName;
$uibModal.open({
animation: true,
ariaLabelledBy: 'modal-title-bottom',
ariaDescribedBy: 'modal-body-bottom',
templateUrl: template,
size: 'sm',
controllerAs: '$ctrl',
controller: function($scope, $uibModalInstance) {
angular.forEach(params, function (e, key){
$scope[key] = e;
});
var $ctrl = this;
$ctrl.ok = function () {
$uibModalInstance.close();
};
$ctrl.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
}
});
}
return {
openModal: openModal
};
}
}
And I use it like this in my controller :
ModalService.openModal("modal.html", {"content": "This experiment doesn't have a tm point", "title": "Tm Point"});
I can pass every variable I need and just set them in my modal html template
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 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.
The docs for the $modal service say
The scope associated with modal's content is augmented with 2 methods:
-$close(result)
-$dismiss(reason)
Those methods make it easy to close a modal window without a need to create a dedicated controller.
I'm wondering how to access this scope without creating a dedicated controller.
Try this:
$scope.openModal=function(){
$scope.modalInstance=$modal.open({
templateUrl: 'xyz.html',
scope:$scope
});
}
$scope.close=function(){
$scope.modalInstance.dismiss();
};
now you can use ng-click="close()" in your temnplate file.
ı used this code.
module.service('ModalService', function ($modal) {
var modalOptions = {
backdrop: true,
keyboard: true,
modalFade: true,
templateUrl: null
};
this.show = function (customModalDefaults) {
var tempModalOptions = {};
angular.extend(tempModalOptions, modalOptions, customModalDefaults);
if (!tempModalOptions.controller) {
tempModalOptions.controller = function ($scope, $modalInstance) {
$scope.modalOptions.ok = function (result) {
$modalInstance.close(result);
};
$scope.modalOptions.close = function (result) {
$modalInstance.dismiss('cancel');
};
};
}
return $modal.open(tempModalOptions).result;
};
});
call:
var modalOptions = {
backdrop: true,
modal: true,
size: scope.options.size || 'lg',
templateUrl: '/Apps/inekle/views/common/include_modal.html?v=1',
controller: [
"$scope", "$modalInstance", function ($scope, $modalInstance) {
$scope.model = {
template: scope.options.template,
title: scope.options.title
};
$scope.close = function () {
$modalInstance.dismiss('close');
};
}
]
};
ModalService.show(this.options).then(function (model) {},function (error) { });
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