$scope is getting lost while opening a modal on ng-click - javascript

When I am trying to open a modal on ng-click the scipe variables is getting lost.
var modalInstance = $modal.open({
templateUrl: 'partials/create.html',
controller: 'AppCreateCtrl',
scope: $scope // <-- I added this
});

You should pass data using the resolve property like this:
var modalInstance = $modal.open({
templateUrl: templateSrv.templateUrl('partials/create.html'),
controller: modalBootstrap,
backdrop: 'static',
keyboard: false,
resolve: {
data: function () {
var result = {};
result.scope = $scope;
return result;
}
}
});
modalInstance.result.then(
function (dataPassedFromModalConroller) {
//this is called when the modal is closed
},
function (dataPassedFromModalConroller) { //Dismiss
//this is called when the modal is dismissed
}
);
Specify the controller for the modal instance like this (we do this in another file):
var modalBootstrap= function ($scope, $modalInstance, data) {
$scope.modalInstance = $modalInstance;
$scope.scope = data.userId;
};
modalBootstrap['$inject'] = ['$scope', '$modalInstance', 'data'];
Your modal template would look something like this:
<div ng-controller="AppCreateCtrl">modal content here</div>

Related

How to use bootstrap modal for multiple controllers?

I want to use same modal window with different parent controller, the only difference in modal controller is separate factories that i am calling e.g Ctrl-1-Factory.getServerFiles so similarly i want to call Ctrl-2-Factory when modal populated for Ctrl2.
ModalCtrl.js
angular.module('App').controller('ServerFilesCtrl', function($scope, $rootScope, FileSaver, $uibModalInstance, Ctrl-1-Factory, $uibModal) {
'use strict';
$scope.cancel = function() {
$uibModalInstance.close();
}
Ctrl-1-Factory.getServerFiles().then(function(response) {
$scope.data = response.data;
console.log($scope.data);
});
});
Ctrl-1.js
$scope.modalInstance = $uibModal.open({
templateUrl: '/web/global/modal.html',
controller:'ModalController'
});
Ctrl-2.js
$scope.modalInstance = $uibModal.open({
templateUrl: '/web/global/modal.html',
controller:'ModalController'
});
You can wrap it in a service method.
angular.module('App').factory('FilesModal', function() {
return {
openModal: openModal
};
function openModal() {
return $uibModal.open({
templateUrl: '/web/global/modal.html',
controller: 'ModalController'
});
}
});
angular.module('App').controller('Ctrl1', function(FilesModal) {
$scope.someEventFunction = someEventFunction;
function someEventFunction() {
$scope.modalInstance = FilesModal.openModal();
}
});
Pass in arguments as needed to make it more robust

How to access the modalInstance $scope from outside the model

I want to update some value of a $modal in AngularJS but unable to understand how I can do this. Sample code is below:
var modalInstance;
function setupCall(data) {
var templateURL = 'partials/Chat.html';
var cssClass = 'medium-Modal';
modalInstance = $modal.open({
backdrop: "static",
keyboard: false,
backdropClick: false,
windowClass: cssClass,
templateUrl: templateURL,
controller: function ($scope, $modalInstance) {
$scope.updateStatus=function() {
...
}
}
});
modalInstance.result.then(function() {
});
}
// first time i call this function to open model
setupCall(event);
Now when model open successfully and if I received some update from service and I again want to show updated values in a model then how I can call updateStatus() from outside the model. I try to using
modalInstance.updateStatus(..) but it is not working. Can someone tell me a proper way to do this?
You can pass a scope option to $modal, and then use AngularJS events
var modalScope = $rootScope.$new();
myService.doSomethingAsync(function (data) {
$rootScope.$emit('some event', data);
});
$modal.open({
scope: modalScope,
controller: function ($scope) {
/* ... */
$scope.$on('some event', function() {
$scope.updateStatus();
});
}
});
You can use $broadcast to call that method. For example, after you received update from your service in your view's controller (where you are calling setupCall or launching the modal), do this:
$rootScope.$broadcast("dataUpdatedFoo", {newData: "bar"));
Now, inside your controller of modal, register a listener for this:
$scope.$on("dataUpdatedFoo", function(e, data) {
$scope.updateStatus();
});
Thanks everyone. I resolve this by adding custom eventlistener.
var listeners = [];
function _addEventListener(listener) {
listeners.push(listener);
return listener;
}
function _removeListener(listener) {
for (var i=0; i < listeners.length; i++){
if (listeners[i] === listener){
listeners.splice(i, 1);
break;
}
}
}
function setupCall(data) {
......
modalInstance = $modal.open({
backdrop: "static",
keyboard: false,
backdropClick: false,
windowClass: cssClass,
templateUrl: templateURL,
controller: function ($scope, $modalInstance) {
var listener = _addEventListener(function (event) {
$log.info("chat msg: "+JSON.stringify(event));
});
$scope.$on('destroy', function () {
_removeListener(listener)
});
...

Angular UI Bootstrap modal display during $http request

I am trying to create a directive that uses angular ui bootstrap modal. I would like to open this directive from my controller when a $http request is made, and close it when the request resolves. I'm new to angular and a bit stuck. Here's what I've got so far.
expedition.html controller:
.controller('ExpeditionCtrl', ['$http', 'UserFactory', '$scope',
function ($http, UserFactory, $scope) {
var vm = this;
vm.totalItems;
vm.itemsPerPage = 100;
vm.currentPage = 1;
vm.pageChanged = pageChanged;
vm.content = [];
vm.loadingInstance;
vm.open;
fetchPage();
function pageChanged() {
fetchPage();
}
function fetchPage() {
$http.get('myapi?page=' + vm.currentPage + "&limit=" + vm.itemsPerPage)
.then(function(response) {
angular.extend(vm.content, response.data.content);
vm.content = response.data.content;
vm.totalItems = response.data.totalElements;
})
}
}
expedition.html:
<div class="section">
<div class="sectioncontent">
// some html
<uib-pagination total-items="vm.totalItems" ng-model="vm.currentPage" ng-change="vm.pageChanged()" items-per-page="vm.itemsPerPage"></uib-pagination>
</div>
<loading-modal loadingInstance="vm.loadingInstance" open="vm.open"></loading-modal>
</div>
</div>
loadingModal.directive.js:
.directive('loadingModal', ['$uibModal',
function($modal) {
return {
transclude: true,
restrict: 'EA',
template: '<div ng-init="open()"> Test Loading </div>',
scope: {
loadingInstance: "=",
open: "="
},
link: function(scope, element, attrs) {
scope.open = function(){
scope.loadingInstance = $modal.open({
templateUrl: 'app/templates/loadingModal.tpl.html',
controller: scope.useCtrl,
size: 'sm',
windowClass: 'app-modal-window',
backdrop: true,
});
scope.loadingInstance.result.then(function(){
scope.initialized = true;
console.log('Finished');
}, function(){
scope.initialized = true;
console.log('Modal dismissed at : ' + new Date());
});
};
}
};
}]);
loadingModal.tpl.html:
<div class="modal-body">
Loading ....
</div>
Ok, so I was able to do this by using a factory. Then in the controller, I call LoadingModalFactory.open() when I initiate a $http request, and LoadingModalFactory.modalInstance.close() when the request resolves. Maybe there's a better way to do this, but for now this is working.
.factory('LoadingModalFactory', ['$uibModal', function($uibModal) {
var modalInstance;
var loadingModalFactory = {
open: open,
modalInstance: modalInstance,
};
return loadingModalFactory;
function open() {
loadingModalFactory.modalInstance = $uibModal.open({
templateUrl: 'app/components/modals/templates/loadingModal.tpl.html',
size: 'sm',
windowClass: 'app-modal-window',
backdrop: true,
});
}
}]);
In your fetchPage() function:
Open the modal and return its object to a variable
Run the $http call and in the resolution, close the modal with its stored variable reference
var modal = $uibModal.open({
//your modal config
});
$http.get(...).then(function(response) {
modal.close();
});
I may be going outside of the question, but you don't have to do this in a directive. You can still modularize this by using a template for the modal and a controller for the modal defined elsewhere.
If you need to do this in a directive, you could pass the http get function into the directive with the '&' scope property.

AnguarJS Modal ID is not defined

I'm trying to implement an AngularJS Modal.
This is my call for the modal
<button data-ng-disabled="!caixa.ativo" data-ng-click="abrir(caixa.id)" class="btn btn-primary btn-xs">Alterar</button>
This is my function
$scope.abrir = function(caixaId) {
var modalInstance = $modal.open({
templateUrl: 'add_modal',
controller: $scope.model,
resolve: {
id: function() {
return caixaId;
}
}
});
};
$scope.model = function($scope, $modalInstance) {
$scope.alerts = [];
//if I remove this code, the modal opens correctly
if (angular.isDefined(id))
alert('edit');
};
But when I click the button, I get this error
Error: id is not defined
$scope.model#http://localhost:8080/websys/resources/js/CaixaController.js:38:1
invoke#http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.js:4182:14
instantiate#http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.js:4190:27
$ControllerProvider/this.$get</<#http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.js:8449:18
resolveSuccess#http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js:1710:32
processQueue#http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.js:13170:27
scheduleProcessQueue/<#http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.js:13186:27
$RootScopeProvider/this.$get</Scope.prototype.$eval#http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.js:14383:16
$RootScopeProvider/this.$get</Scope.prototype.$digest#http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.js:14199:15
$RootScopeProvider/this.$get</Scope.prototype.$apply#http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.js:14488:13
ngEventHandler/<#http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.js:22954:17
m.event.dispatch#http://code.jquery.com/jquery-latest.min.js:3:8384
m.event.add/r.handle#http://code.jquery.com/jquery-latest.min.js:3:5122
The reason your ID is not defined is you are not injecting id as a dependency to your controller.
$scope.abrir = function(caixaId) {
var modalInstance = $modal.open({
templateUrl: 'add_modal',
controller: modalController,
resolve: {
// adding id as a property here allows you to inject it
// into the controller defined below
id: function() {
return caixaId;
}
}
});
};
// you don't need to bind this controller to your scope
// you don't need to inject $modalInstance as a dependency here,
// but you do need to inject id
function modalController($scope, id) {
$scope.alerts = [];
// now id should be defined since you added it as a dependency
if (angular.isDefined(id))
alert('edit');
};

Model binding not working in Angular UI Bootstrap modal

I have simple example using Angular UI Bootstrap modal service. In this example I don't understand why model binding is not working. Instead of seeing "Doing something..." on modal dialog I see "{{message}}". What I need to change?
Example is here:
http://plnkr.co/edit/fJhS3e7At11tJTuNSWAB?p=preview
modal html looks like this:
<div ng-app="myModule">
<div ng-controller="modalInstanceController" class="modal-body">
<div>{{message}}</div>
</div>
</div>
And definition of module and controllers:
var myAppModule = angular.module('myModule', ['ui.bootstrap']);
myAppModule.controller('modalInstanceController', function ($scope, $modalInstance, message) {
var vm = this;
vm.message = message;
});
myAppModule.controller('myController', function ($scope, $modal) {
$scope.open = function open() {
var modalInstance = $modal.open({
templateUrl: 'modal.html',
backdrop: 'static',
//windowClass: 'custom-modal-wait',
dialogFade: false,
keyboard: false,
controller: 'modalInstanceController',
resolve: {
message: function () {
return "Doing something ...";
}
}
});
setTimeout(function(){
modalInstance.close('close');
},5000);
}
});
to use the value you pass to the modal, you need to put it on its scope, so set the modal controller as so:
myAppModule.controller('modalInstanceController', function ($scope, $modalInstance, message) {
$scope.message = message;
});
and remove the ng-controller from modal.html, you are already assigning him a controller when you create the modal instance
ng-controller="modalInstanceController"
your fixed example : http://plnkr.co/edit/vnfL72EBMXsQ1NzlJNEF?p=preview

Categories