I'm using angular-ui-bootstrap in my project and working with bootstrap modal. But I'm having a problem with my modal when I submit I can't call to scope and I got a error "$scope.testAlert is not a function"
controller:
$scope.open = function () {
$uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'userModal.html',
controller: function ($scope, $uibModalInstance, user) {
$scope.user = user;
$scope.save = function () {
var editUser = userService.updateUser($scope.user);
editUser.then(function () {
getAllUsers();
$scope.testAlert();
})
$uibModalInstance.close();
}
},
resolve: {
user: function () {
return $scope.user;
}
}
});
}
$scope.testAlert = function () {
alert("Blah blah");
}
$scope.testAlert is on the $scope of the main controller rather than the modal controller. You need to move it like this:
$scope.open = function() {
$uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'userModal.html',
controller: function($scope, $uibModalInstance, user) {
$scope.user = user;
$scope.save = function() {
var editUser = userService.updateUser($scope.user);
editUser.then(function() {
getAllUsers();
$scope.testAlert();
})
$uibModalInstance.close();
$scope.testAlert = function() {
alert("Blah blah");
}
}
},
resolve: {
user: function() {
return $scope.user;
}
}
});
}
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 have correctly setup my angular modal, now I want to pass my modal data back to my controller. I am using the below code.
First my controller calls my factory service that creates the modal popup:
$scope.mymodal = myService.openModal(data);
My service is as:
function openModal (data) {
var uData = null;
if (data) {
uData = {
userName : data.setName,
gender : data.gender
}
}
var modalInstance = $modal.open({
templateUrl: 'modal.html',
controller: 'ModalController',
backdrop: 'static',
keyboard: false,
resolve: {
data: function () {
return uData;
}
}
});
modalInstance.result.then(function () {
return;
}, function () {
});
return modalInstance;
}
See my jsfiddle here for this: http://jsfiddle.net/aman1981/z20yvbfx/17/
I want to pass name & gender that i select on my modal back to my controller, which then populates my page. Let me know what is missing here.
I updated AboutController, ModalController and myService with comments.
Main idea is return data from ModalController with close method. Fiddle
var app = angular.module('myApp', ['ui.router','ui.bootstrap']);
app.controller('IndexController', function($scope, $log) {
});
app.controller("AboutController", ['$location', '$state', '$scope', '$filter','myService', function($location, $state, $scope, $filter, myService) {
var data = "";
$scope.mymodal = myService.openModal(data);
// after modal is close, then this promise is resolve
$scope.mymodal.then(function(resp){
console.log(resp);
})
}]);
app.controller("ModalController", function($location, $state, $scope, $filter, $modalInstance) {
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
$state.go('index');
};
$scope.done = function () {
// return data on close modal instance
$modalInstance.close({genger:$scope.gender,userName:$scope.userName});
};
});
app.factory('ApiFactory', function ($http) {
var factory = {};
return factory;
});
app.factory("myService",[ "$state", "$modal", "ApiFactory",
function ($state, $modal, factory) {
var service = {
openModal: openModal
};
function openModal (data) {
var uData = null;
if (data) {
uData = {
userName : data.setName,
gender : data.gender
}
}
var modalInstance = $modal.open({
templateUrl: 'modal.html',
controller: 'ModalController',
backdrop: 'static',
keyboard: false,
resolve: {
data: function () {
return uData;
}
}
});
// on close, return resp from modal
modalInstance.result.then(function (resp) {
return resp;
}, function () {
});
// return modal instance promise
return modalInstance.result;
}
return service;
}
]);
app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/index');
$stateProvider
.state('index', {
url: '^/index',
templateUrl: 'index.html',
controller: "IndexController"
})
.state('about', {
url: '^/about',
templateUrl: 'about.html',
controller: "AboutController"
})
}]);
The list is not updating when I trigger reload callback function after modal close.
// Inside my view
<div tasty-table
bind-resource-callback="showStudents.loadAllStudentsRecords"
bind-init="showStudents.init"
bind-reload="reloadCallback"
// Inside my controller
...
Other implementations here
...
vm.reloadCallback = function () { alert("Called"); };
vm.delete = function (studId) {
// Show modal
var modalInstance = $uibModal.open({
templateUrl: 'AppScripts/Views/Student/DeleteStudent.html',
controller: 'DeleteStudentCtrl as deleteStudent',
backdrop : 'static',
keyboard : false,
resolve: {
studentId: function () {
return studId;
}
}
});
modalInstance.result.then(function (status) {
if (status === 'ok')
{
vm.reloadCallback();
}
});
The alert was executed when i call the reloadCallback function but the list is not updated
By the way im using "controller as" syntax.
Because of incomplete code i'm not able to understand which method you are using to close the modal window. Check working Plunkr here. Hope it will solve your problem. https://plnkr.co/edit/LnV021AjBXhamG8ygLp1?p=preview
var app = angular.module('plunker', ['ngAnimate','ui.bootstrap']);
app.controller('MainCtrl', function($scope, $uibModal) {
$scope.name = 'World';
$scope.studentId = "123"
$scope.reloadCallback = function(){
alert("Call back")
}
$scope.showModal = function(){
var modalInstance = $uibModal.open({
templateUrl: 'deletestudent.html',
controller: 'DeleteStudentCtrl as deleteStudent',
backdrop : 'static',
keyboard : false,
resolve: {
studentId: function () {
return $scope.studentId;
}
}
});
modalInstance.result.then(function (status) {
if (status === 'ok'){
$scope.reloadCallback();
}
});
}
});
app.controller('DeleteStudentCtrl', function($scope, $uibModalInstance, studentId) {
console.log(studentId);
$scope.closeMe = function(){
$uibModalInstance.close('ok');
}
})
Documentation for modal https://github.com/angular-ui/bootstrap/tree/master/src/modal/docs
Is it possible to open and close a Modal in one controller??.
Here is my code:
ListRoleApp.controller('ListRoleController', function ($scope, $uibModal, $uibModalInstance) {
$scope.openConfirmModal = function () {
var modalInstance = $uibModal.open({
animation: true,
templateUrl: '../Template/ConfirmForm.tpl.html',
controller: 'ListRoleController',
});
};
$scope.Delete = function () {
alert('Delete')
};
$scope.Cancel = function () {
alert('Cancel')
$uibModalInstance.dismiss('cancel');
};
})
I tried and came across the below error.
Thank you
Yeah, that's possible..
If you have strict-di mode disabled on your AngularJS app you can do it like this:
var modalInstance = $uibModal.open({
animation: true,
templateUrl: '../Template/ConfirmForm.tpl.html',
controller: function($scope, $uibModalInstance) {
$scope.Delete = function () {
alert('Delete')
};
$scope.Cancel = function () {
alert('Cancel')
$uibModalInstance.dismiss('cancel');
};
},
});
If strict-di mode is enabled just define your controller in a separate variable in your ListRoleController and inject the $scope and $uibModalInstance:
var modalController = function ($scope, $uibModalInstance) {
$scope.yes = function() {
$uibModalInstance.close();
};
$scope.cancel = function() {
$uibModalInstance.dismiss('cancel');
};
};
modalController.$inject = ['$scope', '$uibModalInstance'];
var modalInstance = $uibModal.open({
animation: true,
templateUrl: '../Template/ConfirmForm.tpl.html',
controller: modalController,
});
I'm trying to pass a value to the Popup Controller, but is only passing if i insert this "havePermissions" in the controller but gives this error https://docs.angularjs.org/error/$injector/unpr?p0=havePermissionsProvider (Unknown provider: havePermissionsProvider)
if i remove this "havePermissions, i dont have the error, but dont pass the value to the modal controller (is undefined the value)
Modal Open
$scope.open = function (size) {
var modalScope = $rootScope.$new();
modalScope.modalInstance = $modal.open({
templateUrl: 'Views/Common/participants.html',
controller: 'ModalInstanceCtrlPartic',
size: size,
scope: modalScope,
resolve: {
havePermissions: function () {
return $scope.havePermissions;
}
}
});
modalScope.modalInstance.result.then(function () {
});
};
Modal Controller
angular.module("participants.controller", ['ui.bootstrap'])
.controller("ModalInstanceCtrlPartic", ["$scope", "$http", "$location",
"$routeParams", "UserService","havePermissions","logger",
function ($scope, $http, $location, $routeParams, UserService,
havePermissions,logger) {
var page = $location.path().split('/')[1];
$scope.havePermissions = havePermissions;
$scope.ID_Event = page == "events" ? $routeParams.eventId : null;
$scope.ID_UserGroup = page == "groups" ? $routeParams.groupId : null;
$scope.page = page;
$scope.model = {};
UserService.GetParticipants($routeParams.groupId, $routeParams.eventId).then(function (response) {
$scope.model = response.data;
}, function (e) {
logger.logError("Ocorreu um erro, tente novamente.!");
});
$scope.emailList = [];
$scope.ok = function (list) {
//envia email
$scope.modalInstance.close('');
};
$scope.cancel = function () {
$scope.modalInstance.close('');
};
}]);
$modal.open method should not go inside the newly created scope.
Keep var modalInstance = $modal.open({//init code})
Modal code will be changed as follows.
$scope.open = function (size) {
var modalScope = $rootScope.$new();
var modalInstance = $modal.open({
templateUrl: 'Views/Common/participants.html',
controller: 'ModalInstanceCtrlPartic',
size: size,
scope: modalScope ,
resolve: {
havePermissions: function () {
return $scope.havePermissions;
}
}
});
modalInstance.result.then(function () {
});
};
Here is updated plunkr not exactly the same.
Hope this is helpful to you.