I am new to Angular and trying to implement a modal. Having problem closing/dismissing the modal - when I click the cancel button, nothing happens.
Here is the controller code:
angular.module('navApp')
// Passing the $modal to controller as dependency
.controller('HomeCtrl', ['$scope', '$uibModal', function ($scope, $uibModal) {
$scope.title = "Hello, Angm-Generator!";
$scope.open = function () {
var modalInstance = $uibModal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalCtrl'
});
};
}])
.controller('ModalCtrl', function ($scope, $uibModalInstance) {
// Added some content to Modal using $scope
$scope.content = "ModalCtrl, Yeah!"
// Add cancel button
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
})
and here is the template view of the actual modal
<!-- Modal Script -->
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<button type="button" class="close" datadismiss="modal" aria-hidden="true">×</button>
<h3 class="modal-title">Hello from Modal!</h3>
</div>
<div class="modal-body">
Modal Content from: <b>{{ content }}</b>
</div>
<div class="modal-footer">
<button class="btn btn-danger" ngclick="cancel()">Cancel</button>
</div>
</script>
Even clicking the cross on the top right of modal doesn't close the modal. Any ideas? Thanks:)
Should it not be ng-click="cancel()" instead of ngclick?
Also I don't think the scope is bound to the controller, I haven't tested this but I believe you need some more options:
var modalInstance = $uibModal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalCtrl',
controllerAs: '$mCtrl',
bindToController: true
});
And then just update your template:
ng-click="$mCtrl.cancel()"
Have you tried $uibModalInstance.close()?
Another thing you can do is
$scope.open = function () {
var modalInstance = $uibModal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalCtrl'
});
modalInstance.result.then(function successCallBack() {
modalInstance.close()
}, function errorCallBack() {
modalInstance.close()
})
};`
If you want to close the model , on click of the cross bar then , you can use
<button type="button" class="close" data-dismiss="modal">×</button>
This will be button , and data-dismiss="modal" will close your modal.
Related
I was looking for this question on forum and the solution dosn't worked for me, so...
The only way to close the modal is clicking outside of modal, or press ESC on keyboard..
Here is my modal controller:
app.controller('ModalCtrl', function($scope, $uibModal) {
$scope.items = [{}]
$scope.showModal = function(selectedItem) {
var uibModalInstance = $uibModal.open({
windowTopClass: 'modal fade ql-modal',
templateUrl : 'modalContent.html',
controller : function($scope, $uibModalInstance, $uibModal, item){
$scope.item = item;
},
resolve: {
item: function(){
return selectedItem;
}
} // empty storage
});
uibModalInstance.result.then(function(selectedItem){
$scope.selected = selectedItem;
$scope.cancel = function(){
$uibModalInstance.dismiss('cancel');
};
});
};
});
And here is my modal on HTML:
<script type="text/ng-template" id="modalContent.html">
<!-- Modal -->
<!--Content-->
<div class="modal-content">
<!--Header-->
<div class="modal-header">
<button type="button" class="close" data-dismiss="MyModal" aria-label="Close" ng-click="cancel()">
<span aria-hidden="true">×</span>
</button>
...................................
<div class="modal-footer">
<button type="button" class="btn btn-primary" ng-click="cancel()">Close</button>
</div>
</div>
<!--/.Content-->
<!--/Modal-->
</script>
I followed every answer, fiddle, plnkr, but i cannot make it work.
Just move a cancel() method from uibModalInstance.result.then to
your modal controller:
var uibModalInstance = $uibModal.open({
windowTopClass: 'modal fade ql-modal',
templateUrl : 'modalContent.html',
controller : function($scope, $uibModalInstance, $uibModal, item){
$scope.item = item;
$scope.cancel = function(){
$uibModalInstance.dismiss('cancel');
};
},
resolve: {
item: function(){
return selectedItem;
}
} // empty storage
});
I currently use views/foo.html as a normal view.
Say this view has this:
<p>Hello</p>
Now I want to reuse views/foo.html as the content of a modal, but I'd like to wrap it with this:
<div class="modal-header">
<h3 class="modal-title">Foo</h3>
</div>
<div class="modal-body">
<!-- I want to include views/foo.html in here -->
</div>
So the modal would look like this:
<div class="modal-header">
<h3 class="modal-title">Foo</h3>
</div>
<div class="modal-body">
<p>Hello</p>
</div>
The modal invoker is the following: (notice the comment)
$scope.openFooModal = function () {
var modalScope = $scope.$new();
var modalInstance = $uibModal.open({
templateUrl: 'views/foo.html', /* HERE I NEED TO WRAP IT */
controller: 'fooController',
scope: modalScope,
size: 'lg'
});
modalInstance.result.then(function (result) {
}, null);
};
What is the best solution?
Should I create a foo2.html ?
So at the end the comment made by JB Nizet worked as a start, but there was this issue:
Inject $uibModalInstance to a controllar not initiated by a $uibModal
This is what I did finally:
view in charge of opening the modal or displaying it as an ng-view:
<body ng-controller="indexController">
<ul>
<li>
Open as modal
</li>
<li>
Open as non modal
</li>
</ul>
<div ng-view=""></div> <!-- Used by routeProvider -->
</body>
...its controller
angular.module('myApp').controller('indexController', ['$scope','$uibModal', function($scope,$uibModal) {
$scope.openModal = function () {
var modalScope = $scope.$new();
var modalInstance = $uibModal.open({
templateUrl: 'foo-as-modal.html',
controller: 'fooController',
scope: modalScope
});
modalScope.modalInstance = modalInstance;
// ^ I'm giving the modal his own reference
// using the scope. Injecting wont work on
// the non-modal case!
modalInstance.result.then(function (result) {
}, null);
};
}]);
view to be reused as a modal or as a non-modal:
<p>Hello {{name}}</p>
its controller:
angular.module('myApp').controller('fooController', ['$scope', function($scope) {
// ^
// I'm not injecting
// uibModalInstance
// (this is important)
$scope.name = "John";
$scope.cancel = function () {
$scope.modalInstance.dismiss('cancel');
// ^ I can access the modalInstance by the $scope
};
}]);
view to be used as a modal (wrapper)
<div class="modal-header">
<h3 class="modal-title">I'm a modal</h3>
</div>
<div class="modal-body">
<ng-include src="'foo.html'"></ng-include> <!-- Credits to JB's comment -->
</div>
<div class="modal-footer">
<button class="btn btn-default" ng-click="cancel()">Close</button>
</div>
routeProvider
$routeProvider
.when('/nonmodal', {
templateUrl: 'foo.html',
controller: 'fooController'
})
Here is a plunkr: https://plnkr.co/edit/ZasHQhl6M5cCc9yaZTd5?p=info
View calling modal
I have this code you should: open a modal bringing the data within the controller being used by the angular-ui-bootstrap. But it is not getting the result of the "item" that is selected.
in my controller:
function EntidadesCtrlFn(EntidadeService, $uibModal, $log) {
var vm = this;
vm.animationsEnabled = true;
vm.modalEdit = function(size, selectedEntidade) {
var modalInstance = $uibModal.open({
animation: vm.animationsEnabled,
templateUrl: './app/modulos/entidades/views/edit-entidades.html',
controller: function($scope, $uibModalInstance, entidade) {
vm.entidade = entidade;
},
controllerAs: 'vm',
bindToController: true,
size: size,
resolve: {
entidade: function() {
return selectedEntidade;
}
}
});
modalInstance.result.then(function(selectedItem) {
vm.selected = selectedItem;
}, function() {
console.log('Modal dismissed.result.');
$log.info('Modal dismissed at: ' + new Date());
});
};
in view of list:
<div class="row" ng-controller="EntidadesCtrl as vm">
...
<button class="btn btn-default" ng-click="vm.modalEdit('lg', entidade)" type="button">
Editar
</button>
...
This modal opens, but does not bring the contents of:
controller: function($scope, $uibModalInstance, entidade) {
vm.entidade = entidade;
},
TemplateUrl:
<section ng-controller="EntidadesCtrl as vm">
{{vm}}
<div class="modal-header">
<h3 class="modal-title">Editando entidade</h3>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()" type="button">OK</button>
<button class="btn btn-warning" ng-click="cancel()" type="button">Cancel</button>
</div>
</section>
Solved.
I ended up forgetting to pass "this" in the controller ;
Sorry about that.
In the controller modal:
controller: function($uibModalInstance, entidade) {
var vm = this;
vm.entidade = entidade;
},
I am new to angular js
I have to open a modal dialog which display some selected value.
Open Modal
<div modal="showModal" close="cancel()">
<div class="modal-header">
<h4>Modal Dialog</h4>
</div>
<div class="modal-body">
<p>E{{inputValue}}</p>
</div>
<div class="modal-footer">
<button class="btn btn-success" ng-click="ok()">Okay</button>
<button class="btn" ng-click="cancel()">Cancel</button>
</div>
</div>
The controller for the module which contain the modal is:
var app = angular.module('myApp', ['ui.bootstrap.modal']);
app.controller('ctrlTags', function($scope){
$scope.inputValue=$('input:checked').val()
$scope.open = function() {
$scope.showModal = true;
return $scope.inputValue;
};
$scope.ok = function() {
$scope.showModal = false;
};
$scope.cancel = function() {
$scope.showModal = false;
};
});
For some reason the modal is displayed as is it is a regular part of the page (doesn't function as a modal)
Toggling a boolean is not how ui-boostrap modals are opened. See documentation. Basically you have to call $uibModal.open with a template:
$scope.open = function() {
var modalInstance = $uibModal.open({
templateUrl: 'myModal.html',
controller: 'ModalInstanceCtrl'
});
}
Have a look at this plunker where I'm passing a value to the modal, through the resolve property of $uibModal.open.
I am having an Angular issue getting a modal scope to unbind from the parent scope. I want the scope object I pass into the modal to be separate from the corresponding scope object.
No matter how I structure the modal object the parent always mirrors it. The only solution I have found is to change the object property names, but that would be cumbersome to do for every modal in my project.
For example, I can have a $scope variable in the parent $scope.parentData.firstName and a modal variable $scope.modalData.a.b.c.firstName, and the parent will mirror the modal value.
I guess there is some parent child $scope issues here that I am not getting.
Here is a plunk illustrating the issue:
http://plnkr.co/edit/5naWXfkv7kmzFp7U2KPv?p=preview
HTML:
<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">
<input ng-model="modalData.a" />
<input ng-model="modalData.b" />
<input ng-model="modalData.c" />
Selected: <b>{{ sourceData }}</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>
{{sourceData}}
<div ng-show="sourceData">Selection from a modal: {{ test }}</div>
</div>
</body>
</html>
JS:
angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal, $log) {
$scope.sourceData = {a:'abc',b:'bcd',c:'cde'};
$scope.open = function () {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
resolve: {
data: function () {
return $scope.sourceData;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.scopeData = selectedItem;
}, function () {
$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, data) {
$scope.modalData = {};
$scope.modalData = data;
$scope.ok = function () {
$modalInstance.close($scope.modalData);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
You are passing a reference to your current object, what you want to do is use angular.copy() to pass a deep copy of the object to the modal plnkr:
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
resolve: {
data: function () {
return angular.copy($scope.sourceData); // deep copy
}
}
});