I have html file
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3>I'm a modal!</h3>
</div>
<div class="modal-body">
<ul>
<li ng-repeat="item in items">
<a ng-click="selected.item = item">{{ item }}</a>
</li>
</ul>
Selected: <b>{{ selected.item }}</b>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
<button class="btn btn-default" ng-click="open()">Open me!</button>
<div ng-show="selected">Selection from a modal: {{ selected }}</div>
and js
var ModalDemoCtrl = function ($scope, $modal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function () {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
};
var ModalInstanceCtrl = function ($scope, $modalInstance, items) {
$scope.items = items;
$scope.selected = {
item: $scope.items[0]
};
$scope.ok = function () {
$modalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
How to keep changes when I click cancel button and reopen window.
Link to example http://angular-ui.github.io/bootstrap/#/modal
This works? You can pass items through the $modalInstance.close();
(Plunkr: http://plnkr.co/edit/Lbwz5K3Wg8ivp9tBK7Bb?p=preview)
angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function () {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
resolve: {
items: function () {
return $scope.items;
},
selectedItem : function() {
return $scope.selected;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function (selectedItem) {
$scope.selected = selectedItem;
$log.info('Modal dismissed at: ' + new Date());
});
};
};
// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.
var ModalInstanceCtrl = function ($scope, $modalInstance, items,selectedItem) {
$scope.items = items;
$scope.selected = {
item: selectedItem || $scope.items[0]
};
$scope.ok = function () {
$modalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$modalInstance.dismiss($scope.selected.item);
};
};
Related
below is my first controller
.controller('configManagementCtrl', ['$scope', 'deConfigService', 'ngDialog', '$state', 'notificationService',
function ($scope, deConfigService, ngDialog, $state, notificationService) {
$scope.loadDetails = function () {
....
};
$scope.openModal = function () {
var newClassDialog = ngDialog.open({
template: 'views/modals/newClassModal.html',
closeByEscape: false,
controller: 'newClassController',
className: 'ngdialog-theme-default',
width: 600
});
newClassDialog.closePromise.then(function (data) {
console.log(data);
if (data.passBackData.value === 2) {
$scope.loadDetails();
// $state.go('app.config', {}, {reload: true, inherit: false});
// $scope.loadDetails();
}
});
};
}])
In my second controller am trying to send some data to my parent controller as shown below
.controller('newClassController', ['$scope', 'ngDialog', 'deConfigService', 'notificationService',
function ($scope, ngDialog, deConfigService, notificationService) {
$scope.classObj = {};
var passBackData = [];
$scope.cancel = function () {
passBackData.push({'closeVal': 1});
console.log(passBackData);
ngDialog.close(1, passBackData);
};
$scope.create = function (isFormValid) {
if (isFormValid) {
$scope.classObj.added_dt = (new Date()).toISOString();
$scope.classObj.class_id = 0;
deConfigService.createClass($scope.classObj, function (response) {
if (response.data) {
console.log(response.data);
passBackData.push(response.data.data);
notificationService.addSuccess('Class created successfully');
}
else {
notificationService.addError('Error!! Please try later');
}
});
ngDialog.close(1, 2);
}
};
}])
below is the ngdialog html. It has 2 textbox which am able to get data to my second controller but not able to send response back to first controller
<form ng-submit="create(form.$valid)" name="form" novalidate="">
<div class="form-flex ng-pristine ng-invalid ng-touched">
<div class="form-tile">
<label>Class name </label>
<input type="text" ng-model="classObj.name" name="form.name" placeholder="Enter the name of your class" required>
<label>Class description</label>
<textarea ng-model="classObj.description" name="form.description" placeholder="Enter a short description" rows="5" required></textarea>
</div>
</div>
<button type="submit" ng-click="submittedForm = true;" ng-disabled="form.$invalid" class="mat-raised-button-blue"> Create </button>
<button class="mat-raised-button" style="float:right; width:155px" ng-click="cancel();"> Cancel </button>
</form>
Am pushing some objects to the array and trying to send but not able to receive it from parent controller.
Where am doing wrong?
After a closer read of the documentation, it looks like you need to call .close() passing the id of the dialog and the value to return from the dialog's controller. In your parent controller the object passed back to your closePromise callback has id and value properties. You'll need to get whatever you're passing back via the value property (i.e. data.value.whateverYouAreReturning). Here is a simple example that returns an object with a single string property.
angular.module('app', ['ngDialog'])
.controller('ctrl', ($scope, ngDialog) => {
$scope.returnedValue = "";
$scope.openModal = function() {
var newClassDialog = ngDialog.open({
template: 'dialogTemplate',
closeByEscape: false,
controller: 'dialogCtrl',
className: 'ngdialog-theme-default',
width: 600
});
newClassDialog.closePromise.then(function(data) {
$scope.returnedValue = data.value.result;
});
};
})
.controller('dialogCtrl', ($scope, ngDialog) => {
var id = ngDialog.getOpenDialogs()[0];
$scope.returnValue = "";
$scope.close = () => {
ngDialog.close(id, { result: $scope.returnValue });
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-dialog/1.4.0/js/ngDialog.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ng-dialog/1.4.0/css/ngDialog.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ng-dialog/1.4.0/css/ngDialog-theme-default.min.css">
<div ng-app="app" ng-controller="ctrl">
<button ng-click="openModal()">Open Modal</button>
<p>Returned from dialog: {{ returnedValue }}</p>
<script type="text/ng-template" id="dialogTemplate">
<h1>ngDialog Sample</h1>
<p>
<label>Enter a value to return: </label>
<input type="text" ng-model="returnValue" />
</p>
<p><button ng-click="close()">Close</button></p>
</script>
</div>
This might work (can't test it unless you can share a plunker):
.controller('configManagementCtrl', ['$scope', 'deConfigService', 'ngDialog', '$state', 'notificationService',
function ($scope, deConfigService, ngDialog, $state, notificationService) {
$scope.loadDetails = function () {
....
};
$scope.openModal = function () {
$scope.newClassDialog = ngDialog.open({
template: 'views/modals/newClassModal.html',
closeByEscape: false,
controller: 'newClassController',
className: 'ngdialog-theme-default',
width: 600
});
$scope.newClassDialog.closePromise.then(function (data) {
console.log(data);
if (data.passBackData.value === 2) {
$scope.loadDetails();
// $state.go('app.config', {}, {reload: true, inherit: false});
// $scope.loadDetails();
}
});
};
}])
and in the other controller:
.controller('newClassController', ['$scope', 'ngDialog', 'deConfigService', 'notificationService',
function ($scope, ngDialog, deConfigService, notificationService) {
$scope.classObj = {};
var passBackData = [];
$scope.cancel = function () {
passBackData.push({'closeVal': 1});
console.log(passBackData);
$parent.$scope.newClassDialog.close(1, passBackData);
};
$scope.create = function (isFormValid) {
if (isFormValid) {
$scope.classObj.added_dt = (new Date()).toISOString();
$scope.classObj.class_id = 0;
deConfigService.createClass($scope.classObj, function (response) {
if (response.data) {
console.log(response.data);
passBackData.push(response.data.data);
notificationService.addSuccess('Class created successfully');
}
else {
notificationService.addError('Error!! Please try later');
}
});
$parent.$scope.newClassDialog.close(1, 2);
}
};
}])
When I click the cancel button on my modal, the $modalInstance.dismiss function binded with ng-click on my modal template isn't working.
The console has been throwing the error: "$modalInstance.dismiss is not a function"
MODAL TEMPLATE:
<div class="my-modal ng-scope" id="my-modal">
<div class="modal-header">
<h3 class="modal-title" id="modal-title">Create a new room</h3>
</div>
<div class="modal-body" id="modal-body">
<form>
Enter a room name<br>
<input type="text" name="new-room-name">
</form>
<div class="modal-footer">
<button class="btn btn-warning" type="button" ng-click="modal.cancel()">Cancel</button>
<button class="btn btn-primary" type="button" ng-click="modal.save()">Create Room</button>
</div>
</div>
MAIN CONTROLLER:
(function() {
function HomeCtrl(Room, $scope, $uibModal, $log, $document) {
var home = this;
home.chatRooms = Room.all;
//TO TEST ADD METHOD FROM ROOM.JS
// this.addRoom = Room.add();
home.open = function () {
modalInstance = $uibModal.open({
animation: true,
backdrop: true,
templateUrl: '../templates/modal.html',
controller: 'ModalInstanceCtrl',
controllerAs: 'modal',
bindToContoller: true,
scope: $scope,
size: 'lg',
resolve: {
'$modalInstance': function () { return function () { return modalInstance; } }
}
});
console.log(modalInstance);
modalInstance.result.then(function (newChatRoom) {
home.selected = newChatRoom;
console.log(newChatRoom);
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
}
angular
.module('blocChat')
controller('HomeCtrl', ['Room', '$scope', '$uibModal', '$log', '$document', HomeCtrl]);
})();
MODAL CONTROLLER:
(function() {
function ModalInstanceCtrl(Room, $scope, $modalInstance, $log, $document) {
var modal = this;
this.save = function() {
$modalInstance.close(newChatRoom);
};
this.cancel = function() {
$modalInstance.dismiss('cancel');
};
}
angular
.module('blocChat')
.controller('ModalInstanceCtrl', ['Room', '$scope', '$modalInstance', '$log', '$document', ModalInstanceCtrl]);
})();
I've spent about 3 hours messing around with my code, looking at the AngularJS Bootstrap UI documentation, several StackOverflow threads, and other sites and have gotten no where. Any help would be appreciated.
In the version of angular ui bootstrap you're using, the reference to the modal instance is called $uibModalInstance. So try changing your controller to this:
(function() {
function ModalInstanceCtrl(Room, $scope, $uibModalInstance, $log, $document)
{
var modal = this;
this.save = function() {
$uibModalInstance.close(newChatRoom);
};
this.cancel = function() {
$uibModalInstance.dismiss('cancel');
};
}
angular
.module('blocChat')
.controller('ModalInstanceCtrl', ['Room', '$scope', '$uibModalInstance', '$log', '$document', ModalInstanceCtrl]);
})();
I am using angularjs. I am trying to send parameters and object into the popup.
Click here:
Html code:
<script src="https://code.angularjs.org/1.4.9/angular.min.js"></script>
<script src="https://rawgit.com/dwmkerr/angular-modal-service/master/dst/angular-modal-service.js"></script>
<div class="container" ng-app="app" ng-controller="Controller">
<h3>Angular Modal Service</h3>
<a class="btn btn-default" href ng-click="show()">Show a Modal</a>
<p>{{message}}</p>
<!-- The actual modal template, just a bit o bootstrap -->
<script type="text/ng-template" id="modal.html">
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" ng-click="close('Cancel')" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Yes ossssssssr No?</h4>
</div>
<div class="modal-body">
<p>It's your call...</p>
</div>
<div class="modal-footer">
<button type="button" ng-click="close('No')" class="btn btn-default" data-dismiss="modal">No</button>
<button type="button" ng-click="close('Yes')" class="btn btn-primary" data-dismiss="modal">Yes</button>
</div>
</div>
</div>
</div>
</script>
</div>
Js Code:
var app = angular.module('app', ['angularModalService']);
app.controller('Controller', function($scope, ModalService) {
$scope.url = 'google.com';
var obj= {};
obj.name = "test"
$scope.data = obj;
$scope.show = function() {
ModalService.showModal({
templateUrl: 'modal.html',
controller: "ModalController"
}).then(function(modal) {
modal.element.modal();
modal.close.then(function(result) {
$scope.message = "You said " + result;
});
});
};
});
app.controller('ModalController', function($scope, close) {
$scope.close = function(result) {
close(result, 500); // close, but give 500ms for bootstrap to animate
};
});
How to pass the scope url and data values into the popup.
I saw few example to pass using resolve.
Please check my example
try this:
ModalService.showModal({
templateUrl: 'modal.html',
controller: "ModalController",
resolve : {
data: function () {
return $scope.data
}
}
})
in model controller you can get data like
app.controller('ModalController', function($scope, close, data) {
$scope.close = function(result) {
close(result, 500); // close, but give 500ms for bootstrap to animate
};
});
Call broadcast with data to Your modal, and catch event:
var app = angular.module('app', ['angularModalService']);
app.controller('Controller', function($scope, $rootScope, ModalService) {
$scope.url = 'google.com';
var obj= {};
obj.name = "test"
$scope.data = obj;
$scope.show = function() {
ModalService.showModal({
templateUrl: 'modal.html',
controller: "ModalController"
}).then(function(modal) {
modal.element.modal();
modal.close.then(function(result) {
$rootScope.$broadcast('ModalController:set', {message: "You said " + result});
});
});
};
});
app.controller('ModalController', function($scope, close) {
$scope.close = function(result) {
close(result, 500); // close, but give 500ms for bootstrap to animate
};
$scope.$on('ModalController:set', function(event, data) {
for(var i in data) {
$scope[i] = data[i];
}
});
});
"showModal" has a property with name "resolve".It lets you to share (pass) parameters to the controller.For example:
ModalService.showModal({
templateUrl: 'modal.html',
controller: "ModalController",
resolve : {
data: function () { // ro you can pass a value in stead of function
return $scope.data
}
}
})
And in controller you can inject it like services or use it with scope like scope.data
I'm creating a simple update modal. To do so, I'm passing a parameter into my angular-bootstrap modal. I've two controllers, ModalCtrl and ModalInstanceCtrl:
adminController.controller('ModalCtrl', ['$scope', '$modal', '$log', 'Profile',
function ($scope, $modal, $log, Profile) {
$scope.open = function (profile) {
var modalInstance = $modal.open({
animation: true,
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
resolve: {
profile: function () {
$log.info(profile);
return profile;
}
}
});
modalInstance.result.then(function (updatedProfile) {
$log.info(updatedProfile);
Profile.post(updatedProfile);
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
}]);
adminController.controller('ModalInstanceCtrl', function ($scope, $modalInstance, profile) {
$scope.ok = function () {
$modalInstance.close(profile);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});
The profile is logged both when opening and accepting the modal - leading me to believe that it's being passed into the instance without issue. However, displaying the modal doesn't display anything from that profile object:
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">Profile View</h3>
</div>
<div class="modal-body">
<div><p>{{profile.profileType}}</p></div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>
</script>
What am I doing wrong?
You need to put the profile object on the $scope for it to be accessible in the HTML template:
adminController.controller('ModalInstanceCtrl', function ($scope, $modalInstance, profile) {
$scope.profile = profile;
$scope.ok = function () {
$modalInstance.close(profile);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});
I'm writing a controller. This controller has to communicate with an other controller. But I don't know is it posible?
HTML:
<div data-ng-app="TestApp">
<div data-ng-controller="menuCtrl">
<ul>
<li> <a data-ng-click="Click()">
Menü1</a>
</li>
</ul>
</div>
<div data-ng-controller="pageCtrl">
<hr/>
<button data-ng-click="getText()">GetText</button>
<br/>
<strong data-ng-model="boldText"> {{boldText}}</strong>
</div>
JS:
var app = angular.module('TestApp', []);
app.controller('menuCtrl', function ($rootScope, $scope) {
$scope.Click = function () {
//???
};
})
.controller('pageCtrl', function ($rootScope, $scope) {
$scope.getText = function () {
$scope.boldText = 'tst';
};
});
I repaired sample on JSfiddle:sample
You can easily achieve that with broadcasting:
var app = angular.module('TestApp', []);
app.controller('menuCtrl', function ($rootScope, $scope) {
$scope.Click = function () {
$scope.$broadcast('MyClickEvent', {
someProp: 'Clicking data!' // send whatever you want
});
};
})
.controller('pageCtrl', function ($rootScope, $scope) {
$scope.getText = function () {
$scope.boldText = 'tst';
};
$scope.$on('MyClickEvent', function (event, data) {
console.log(data); // 'Data to send'
});
});
Using the events broadcast, we can pass the value form one controller to another
app.controller('menuCtrl', function ($rootScope, $scope) {
$scope.Click = function () {
var valueToPass = "value";
$rootScope.$broadcast('eventMenuCtrl', valueToPass);
};
})
.controller('pageCtrl', function ($rootScope, $scope) {
$scope.getText = function () {
$scope.boldText = 'tst';
};
$scope.$on('eventMenuCtrl', function(event, value) {
$scope.boldText = value;
})
});
http://jsfiddle.net/q2yn9jqv/4/