Hi I am trying to create a simple modal dialog that pops up when a user clicks a button. I am brand new to Angular and Bootstrap and I'm having a hard time figuring it out. I've created a plnkr here
(function () {
'use strict';
angular
.module('crm.ma', ['ui.bootstrap'])
.controller('AdvancedSearchCtrl', function ($modal) {
vm.openModal = function () {
var modalInstance = $modal.open({
templateUrl: 'topnav_advancedmodal.html',
controller: 'searchCtrl as modal'
});
}
})
});
http://plnkr.co/edit/VgQqRIMGewuwQPnUxm87?p=catalogue
plnkr code above. Please help!
You have several issues with your code. Here are some of them:
JavaScript
(function() {
"use strict";
angular.module('crm.ma', ['ui.bootstrap']). // You define new module with angular.module('...', []) syntax. If module is already initialised, use angular module('...') instead
controller('searchCtrl', function() {}). // Make sure this controller exists and registered in angular
controller('advancedSearchCtrl', ['$modal',function ($modal) { // Use ['x', function(x) {...}] syntax
this.openModal = function () { // vm -> this
var modalInstance = $modal.open({
templateUrl: 'topnav_advancedmodal.html',
controller: 'searchCtrl as modal' // <- make sure searchCtrl controller exists and is registered
});
};
}]);
}());
Plunker
http://plnkr.co/edit/6X40tgEriHXTjBsfvkHy?p=preview
Related
My app uses Angular UI to deal with modals and I think I found a problem, as below:
I have a controller that calls the modal controller:
angular.module('MyApp').controller('MainCtrl', function ($scope, $modal) {
$scope.openModal = function () {
var myModal = $modal.open({
animation: true,
templateUrl: 'ModalContent.html',
controller: ModalCtrl
});
};
});
I also have the modal controller in another file, as a simple function:
function ModalCtrl ($scope, $modalInstance) {
$scope.ok = function () {
$modalInstance.close();
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
It's working well, but I think the modal controller have to be inside AngularJs module. The questions are:
Can I do it and keep the modal controller in a separated file?
It's a good practice keep the modal controller outside AngularJs module?
What is the best practice to reuse a modal controller in many pages?
Thanks a lot!
That object you're passing into $modal.open() can be registered as a shared service and the modal controller can be embedded right inside it.
angular.module('myApp').factory('myModalConfig', function() {
return {
animation: true,
templateUrl: 'ModalContent.html',
controller: function($scope, $modalInstance) {
$scope.ok = function () {
$modalInstance.close();
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
}
};
});
Then just inject that along with the $modal service and pass it.
angular.module('MyApp').controller('MainCtrl', function ($scope, $modal, myModalConfig) {
$scope.openModal = function () {
var myModal = $modal.open(myModalConfig);
};
});
I go further than this myself and wrap the whole thing into a custom modal service factory, so I can just inject one thing and open modals like this: profileModals.editProfile(). But that's beyond the scope of this answer.
Hi i want to open and close the bootstrap model popup by using angularjs controller.js code.
my controller code
app.controller('RoleViewCtrlq', ['$scope', '$modalInstance', '$modal',
function ($scope, $modalInstance, $modal) {
$scope.open = function () {
debugger;
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
});
$scope.ok = function () {
$modalInstance.close();
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
}
}
]);
Here i have create the sample
https://plnkr.co/edit/xRhCR7qidlr24M8nAOA6?p=preview
it is not working to open and close my pop up in controller.js code. can any one check the issue.??
<script type="text/ng-template" id="myModalContent.html">
Remove this script tag from HTML and try again. It is working
In the Plunker you have provided, you have not set any myModalContent.html.
When using:
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html'
});
Angular will check for a myModalContent.html file to include in the modal. It means creating the modal from a template.
After reviewing your code, I think this is not exactly what you are trying to achieve:
Forked your Plunker
I'm trying to get modals woking with angular bootstrap. I can launch the modal just fine, but I'm having some scope issues dismissing the modal.
When I launch the modal, I can specify a controller that I can call functions from, which works, but it seems to be a copy of the controller without a $parent and without any controller-local variables.
I need access to the return value of $uibModal.open() in order to close the modal, so I'm trying to store it in var modalInstance, which works fine when I'm within the scope of the controller, but the copy of the controller passed into the $uibModal service doesn't have the local variable modalInstance set.
I can get around this by storing the return object in the $rootScope, but that seems like a bad idea. Am I wrong? What's the best way to get access to modalInstance from the click handler passed into the $uibModal service? Can I avoid using the $rootScope?
var app = angular.module('main', ['ui.bootstrap']);
app.controller('MainCtrl', function($scope, $rootScope, $uibModal) {
var modalInstance;
$scope.launch = function() {
console.log('launch');
modalInstance = $uibModal.open({
template: '<div>Modal Content - <a ng-click="close()">Close</a></div>',
controller: 'MainCtrl',
});
// Wouldn't need to do this if I could access modalInstance in close handler
$rootScope.modalInstance = modalInstance;
}
$scope.close = function () {
console.log('close');
console.log(modalInstance);
// Works, but should I be using $rootScope like this?
//$rootScope.modalInstance.close();
// Doesn't work, modalInstance is undefined
modalInstance.close();
}
});
Angular instantiates a new instance of a controller whenever it is used, and it is the same for modal. So when you specify controller: 'MainCtrl' you're telling angular you want to instantiate one of those for your modal, which is rarely what you want.
Instead you should create a separate controller for the dialog, which can return values on closing using the $uibModalInstance service.
var app = angular.module('main', ['ui.bootstrap']);
app.controller('MainCtrl', function($scope, $rootScope, $uibModal) {
var modalInstance;
$scope.launch = function() {
console.log('launch');
modalInstance = $uibModal.open({
template: '<div>Modal Content - <a ng-click="close()">Close</a></div>',
controller: 'DialogCtrl',
});
....
}
});
app.controller('DialogCtrl', function($scope, $uibModalInstance) {
$scope.theThingIWantToSave = [];
$scope.cancel = function () {
$uibModalInstance.close($scope.theThingIWantToSave);
};
});
I am using angular bootstrap ui modal which is working fine but when I try to close it using modalInstance it gives above error.Here is my code
var app = angular.module('LoginModule', ['ui.bootstrap']);
app.controller('LoginModal', ['$scope', '$modal', function ($scope, $modal) {
$scope.animationsEnabled = true;
$scope.open = function (size) {
var modalInstance = $modal.open({
animation: $scope.animationsEnabled,
templateUrl: '/app/template/Login.html',
controller: 'LoginController',
size: size
});
}
}]);
app.controller('LoginController', ['$scope', '$modalInstance', '$http', function ($scope, $modalInstance, $http) {
$scope.model = {};
$scope.loading = {
state: false
}
$scope.errors = '';
$scope.email = "";
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
}]);
I have created the cancel function in the controller which I specify with the template still it gives error.I use ng-click="cancel()" in button inside LoginController .
Need help?
Looks like you are instantiating the controller with ng-controller directive in the modal view. Instead you only need to use controller option of the modal in order to get the special dependency $modalInstance injected. If you have instantiated controller using ng-controller="LoginController" you need to remove it and you would not need it as well as the controller would automatically be instantiated (by resolving special dependency $modalInstance) and attached to the template.
I've spent some time having a play with the AngularJS Bootstrap popup, and for intents it's working great, but what i'd like to do is bind it, and it's dependant script to the same controller, what i can't get working is the close button now though. If i create a NEW controller, and inject $modalInstance it works great and i can wireup the close button without any issues at all, but i don't want a second controller, it seems to be over complication: i want all my controller logic in the formController really.
Why would i actually want two controllers? Passing the scope between two controllers just seems overkill to me, and the larger a project becomes the more un-managable it will become. Am i trying to over-simplify this unnecessarily? :)
The script:
(function(){
var app = angular.module('ngModalDemo', ['ui.bootstrap'])
.controller('formController', function($scope, $modal){
$scope.openModal = function () {
var modalInstance = $modal.open({
templateUrl: 'SomeModal.html',
controller: 'formController'
});
};
$scope.closeModal = function () {
// Code needed here :)
};
})
})();
The HTML body (excuse the HTML in script for the purposes of the DEMO):
<div ng-controller="formController">
<button class="btn btn-default" ng-click="openModal()">Let's do some stuff!</button>
<script type="text/ng-template" id="SomeModal.html">
<div class="modal-header">Do some stuff in this modal y'all.</div>
<div class="modal-footer">
<button class="btn btn-info" ng-click="closeModal()">Close</button>
</div>
</script>
</div>
The answer based on Kaspars' input :)
(function(){
var app = angular.module('ngModalDemo', ['ui.bootstrap'])
.controller('formController', function($scope, $modal, $log){
$scope.openModal = function () {
var modalInstance = $modal.open({
templateUrl: 'SomeModal.html',
controller: [
'$scope', '$modalInstance', function($scope, $modalInstance){
$scope.closeModal = function () {
$modalInstance.close();
};
}
]
});
};
})
})();
I was struggling with the same problem and the best thing I came up with was to use anonymous function as a modal controller. In that way all the logic is in the same controller and you don't have to create separate controller for each modal window.
This would look like this:
(function(){
var app = angular.module('ngModalDemo', ['ui.bootstrap'])
.controller('formController', function($scope, $modal){
$scope.openModal = function () {
var modalInstance = $modal.open({
templateUrl: 'SomeModal.html',
controller: [
'$scope', '$modalInstance', 'data', function($scope, $modalInstance, data) {
$scope.data = data;
$scope.ok = function() {
$modalInstance.close();
};
$scope.closeModal = function() {
$modalInstance.dismiss();
};
}
]
});
};
})
})();
PS. Haven't tested code above, just put it together from your provided code and fragments from one of my projects.
You can also try this
var modalInstance = $modal.open({
templateUrl : 'someTemplate.html',
scope : $scope,
size : 'md'
});