I'm somehow newbie to $uibmodal and I want to show a form in popup style for each button that I have on my page, and I want to separate code of each popup form to their own js controller and template, not inside my main js controller and template.
here's my simpled code to show the form as a popup :
var modalInstance = $uibModal.open({
templateUrl: '/App/views/security/people/roleView.html',
controllerUrl: '/App/views/security/people/roleController.js',
controller: 'roleController',
size: 'lg',
resolve: {},
});
and here is my simpled code of my controller :
define(['app'], function (app) {
app.register.controller("roleController", ["$scope", "dataService", "$uibModal", "messageService",
function ($scope, dataService, $uibModal, messageService) {
debugger
}
]);
});
my problem is that whenever I click the button it give's me the error that my controller named as 'rolecontroller' is not registered.
The controller with the name 'roleController' is not registered.
thanks in advance.
You should add the controller in the initial bootstrap in your app.js like this
app.controller("roleController", ["$scope", "dataService", "$uibModal", "messageService",
function ($scope, dataService, $uibModal, messageService) {
debugger
}]);
Related
I have this code:
app.controller('addEmployeeCtrl', function($scope, $uibModalInstance, newEmployee){
$scope.addNewVehicle=function(){
// I want to open a new modal here
};
});
You should be able to open a second modal in much the same way as you opened the first...
Inject the $uibModal service into addEmployeeCtrl and make a call to $uibModal.open() passing in another modal configuration object.
app.controller('addEmployeeCtrl', function($scope, $uibModalInstance, $uibModal, newEmployee){
$scope.addNewVehicle = function(){
var modalInstance = $uibModal.open({
templateUrl: 'addVehicle.html',
controller: 'addVehicleCtrl',
controllerAs: 'vehicleVm'
// Any other modal config properties here
}
modalInstance.result.then(closedCallback, dismissedCallback);
function closedCallback(){
// Do something when the modal is closed
}
function dismissedCallback(){
// Do something when the modal is dismissed
}
};
});
I am working bootstrap modal directive . I need to open modal popup on ajax error method and popup is showing fine. but on button click inside modal , Where i need to dismiss modal , I am getting error
$uibModalInstance is not defined
First on module , I have registered correctly
var angularFormsApp = angular.module("angularFormsApp", ["ngRoute", "ui.bootstrap"]);
then on angular controller , I have injected this directive correctly.
var loginController = function ($scope, $window, $routeParams, $uibModal, DataService)
then I am calling this modal by following code inside same controller
var onError = function (reason) {
$scope.modalOptions.headerText = "Error";
$scope.modalOptions.bodyText = reason.statusText;
$uibModal.open({
templateUrl: baseurl + 'app/ErrorMessages/PopUpErrorMessage.html',
controller: 'loginController',
scope: $scope
});
};
$scope.cancelForm = function () {
$uibModalInstance.dismiss();
};
Now as you can see I have created separate html file for modal and below is html
<div class="modal-header">
<h3>{{modalOptions.headerText}}</h3>
</div>
<div class="modal-body">
<p>{{modalOptions.bodyText}}</p>
</div>
<div class="modal-footer">
<input type="button" class="btn btn-default" value="Close"
ng-click="cancelForm()" />
</div>
Now When I click close button I am getting error
ReferenceError: $uibModalInstance is not defined
at Scope.$scope.cancelForm (loginController.js:44)
Now I have gone though some different solution for same problem
Eg : http://plnkr.co/edit/6djuhA8ohMkrWW7zohg1?p=preview
But in this case above example is using two different controller but in my case I am using same controller ,and If i inject both $uibModal as well as $uibModalInstance then its not working
Yes uibModalInstance will be undefined.
You need to store the reference of your uibmodel and call close on that reference.
Like this :
var myModel = $uibModal.open({
templateUrl: baseurl + 'app/ErrorMessages/PopUpErrorMessage.html',
controller: 'loginController',
scope: $scope
});
and in close function:
$scope.cancelForm = function () {
myModel.close();
};
You need to injected $uibModalInstance in your Controller as follows
var loginController = function ($scope, $window, $routeParams, $uibModal, DataService,$uibModalInstance)
In your Controller from where you are opening modal, you need to inject the dependency $uibModal.
To open the modal you need to specify a html template, controller for the modal.
$scope.ErrorModal = function(index) {
var modalInstance = $uibModal.open({
animation: true,
backdrop: 'static',
templateUrl: "/PopUpErrorMessage.html",
controller: "popupErrorMsgController",
controllerAs: "PEMCtrl",
size: "md",
resolve: {
modalInstanceData: {
headerText: "Error",
bodyText:reason.statusText
}
}
});
modalInstance.result.then(function(receivedObject) {
//Modal closed
});
Now in your Modal Controller -popupErrorMsgController you can access the modal instance by injecting $uibModalInstance. Also you can inject the other parameters which you want to resolve in your modal controller
angular.module('yourApp')
.controller('popupErrorMsgController', popupErrorMsgController);.
popupErrorMsgController.$inject = ['$scope', '$uibModalInstance', 'modalInstanceData'];
function popupErrorMsgController($scope, $uibModalInstance, modalInstanceData) {
$scope.modalInstanceData = modalInstanceData;
$scope.cancelForm = function(){
var objectToSend = {};
$uibModalInstance.close(objectToSend);
}
}
In your modal controller you can assign the received parameters to the $scope of modal and access it inside your modal HTML template.
<h3>{{modalInstanceData.headerText}}</h3>
Hope this works for you!
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 tried to use Angular boostrap-ui in a directive but it didn't work, so I decided to use a service which will use the Angular bootstarp-ui , and to inject it into directive.
I'm keep getting this error :
Unknown provider: ui.bootstrapProvider <- ui.bootstrap <- modal <- monitorCardDirective
The Angular app :
'use strict';
var app = angular.module('app', [ 'ui.bootstrap' ,'restangular']);
app.controller('nav', function($scope, $uibModal, $filter, Restangular) {
$scope.search = false;
});
app.directive('monitorCard',['modal',function(modal) {
return {
link: function(scope, element, attr) {
element.bind('click',function(){
modal.open({
templateUrl: 'monitoController.html',
controller: 'monitorController'
});
});
},
scope:{
monitorCard: '='
}
};
}]);
app.factory('modal',['ui.bootstrap',function($uibModal){
var modalInstance = $uibModal.open({
templateUrl: 'monitoController.html',
controller: 'monitorController'
});
return modalInstance;
}]);
In the definition of your modal factory, replace:
app.factory('modal', ['ui.bootstrap', function($uibModal)
with
app.factory('modal', ['$uibModal', function($uibModal)
As a side note, notice this factory returns a modal instance. A modal instance object is not a modal service and doesn't have an open method, so you will get another error. Judging at the directive you are defining, it seems you just need to inject uibModal service in the directive.
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.