I have this code inside a controller. I'm using it to open an angularJS Bootstrap modal with another controller attached.
Is there a way I can not use $scope for the ok() and cancel() functions here?
$scope.deleteTest = (test: ITest) => {
var self = this;
var modalInstance = $modal.open({
templateUrl: '/app/tests/partials/deleteTest.html',
controller: ['$scope', '$modalInstance', 'testService',
function ($scope, $modalInstance, testService: ITestService) {
$scope.ok = () => {
var self = this;
testService.deleteTest()
.then(
() => {
$modalInstance.close();
});
};
$scope.cancel = () => {
$modalInstance.dismiss('cancel');
};
}],
});
}
Looks like you are using TypeScript so you can do something like this
var modalInstance = $modal.open({
templateUrl: '/app/tests/partials/deleteTest.html',
controller: DeleteTest,
controllerAs: 'ctrl'
});
//...
class DeleteTest {
static $inject = ['$modalInstance', 'testService'];
constructor(private $modalInstance, private testService: ITestService) {
}
ok() {
this.testService.deleteTest().then(() => this.$modalInstance.close());
}
cancel() {
this.$modalInstance.dismiss('cancel');
}
}
In deleteTest.html you could call the ok() method with something like
<button ng-click="ctrl.ok()">Ok</button>
Related
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"
})
}]);
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;
}
}
});
}
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.
I am new to angularJS and not sure what i'm doing wrong.
I am trying to implement an edit modal window so I am making a copy of the element to edit, then trying to access it once an image upload i done to update the image src, but for some reason the scope variable is empty in the upload function.
What am i doing wrong ?
app.controller('projectsController', function($scope, $rootScope, $http, $modal) {
$scope.edit = function(index){
$scope.tempObj = angular.copy($scope.projects[index]);
var modalInstance = $modal.open({
templateUrl: 'projects/_edit_project',
controller: ModalInstanceCtrl,
resolve: {
obj: function () { return $scope.tempObj; }
}
}).result.then(function (project) { $scope.projects[index] = project });
}
$scope.processFileUpload = function(){
console.log($scope.tempObj) <--THIS RETURNS UNDEFINED
}
var ModalInstanceCtrl = function ($scope, $modalInstance, obj) {
$scope.obj = obj;
$scope.ok = function () {
$modalInstance.close($scope.obj);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
}