Use UI-Bootstrap Modal with Angular-Fullstack and ES6 - javascript

I would like to use the ui-bootsrap Modal with the AngularJS Fullstack Generator & ES6, but it doesn't work.
I would like to choose a Project, click "Edit" and edit the Project in a large Modal. But I don't get the modal to open.
In the Console, I get this error Message:
"Error: $modal is not defined"
My Project Controller looks like this:
'use strict';
(function() {
class ProjectCtrl {
constructor(Project, $modal, $log) {
this.project = Project;
this.projects = [];
this.getAllProjects(Project);
this.$modal = $modal;
this.log = $log;
}
// Open a modal window to Update a single Project
modalUpdate(size, selectedProject) {
var modalInstance = $modal.open({
templateUrl: 'app/project/project-edit.modal.html',
controller: function ($scope, modalInstance, aProject) {
$scope.project = aProject;
},
size: size,
resolve: {
aProject: function () {
return selectedProject;
}
}
});
modalInstance.result.then(function (selectedItem) {
this.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
}
angular.module('projectApp')
.controller('ProjectCtrl', ProjectCtrl);
})();
app.js looks like this:
'use strict';
angular.module('projectApp', [
'projectApp.constants',
'ngCookies',
'ngResource',
'ngSanitize',
'ui.router',
'ui.bootstrap'
])
.config(function($urlRouterProvider, $locationProvider) {
$urlRouterProvider
.otherwise('/');
$locationProvider.html5Mode(true);
});
The Button to open the Modal:
<button type="button" class="btn btn-default btn-xs pull-right" ng-click="ProjectCtrl.modalUpdate('lg', project)"><span aria-hidden="false"></span> Edit</button>
My guess is that in ProjectCtrl, I have somehow to $inject 'Project', '$modal' & '$log', but I don't know how and where.

I solved the Modal problem in another way, cause it seems that UI Bootstrap doesn't work in ES6. At least not now.
I used the Modal Service here for Angular-Fullstack.
Here is a simple example with a delete Modal:
'use strict';
(function() {
class AdminController {
constructor(User, Modal) {
// Use the User $resource to fetch all users
this.users = User.query();
this.modal = Modal;
}
delete(user) {
var deleteConfirmationModal = this.modal.confirm.delete((user) => {
user.$remove();
this.users.splice(this.users.indexOf(user), 1);
});
deleteConfirmationModal(user.name, user);
}
}
angular.module('sampleApp.admin')
.controller('AdminController', AdminController);
})();
This is how the Modal looks like:

Which version of ui-bootstrap are you using ?
The syntax is different depending on which version you're using.
Assuming you're using v0.13.4 or older and without ES6, here the solution :
NOTE :
If you're using more recent version than v0.13.4 then replace $modal by $uibModal and $modalInstance by $uibModalInstance and it should work too.
First, what you need to do is write in the command line :
yo angular-fullstack:controller MyModalName
then in myModalName.controller.js put this :
.controller('MyModalNameCtrl', function ($scope,$modal) {
$scope.openModal = function () {
var modalInstance = $modal.open({
animation: true,
templateUrl: 'testmodal',
controller: 'ModalInstanceCtrl',
});
modalInstance.result.then(function () {}, function () {
console.log('Modal dismissed at: ' + new Date());
});
};
});
Then still in myModalName.controller.js put below :
//change theNameOfYourApp to your corresponding app name !
angular.module('theNameOfYourApp').controller('ModalInstanceCtrl', function ($scope, $modalInstance) {
$scope.ok = function () {
$modalInstance.close();
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});
Then last step, in your .html page where you want to display the modal, put :
<!--Modal Template-->
<div ng-controller="MyModalNameCtrl">
<script type="text/ng-template" id="testmodal">
<div class="modal-header">
<h3 class="modal-title">Hello :</h3>
</div>
<div class="modal-body">
<p>hey, this is the body </p>
</div>
<div class="modal-footer">
<button class="btn btn-default" type="button" ng-click="ok()">OK</button>
<button class="btn btn-default" type="button" ng-click="cancel()">Cancel()</button>
</div>
</script>
</div>

Related

AngularJS Bootstrap Modal $modalInstance.dismiss is not a function

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]);
})();

Issue with the controller of a UI Bootstrap Modal

I am new to Angular. I have created a component with a template (panel.html) and a controller (allPanelsRetrieved). When a specific button defined in the template is clicked, the showDetails() function specified in the controller is called. This function triggers the opening of a modal dialog specified by a template (panel-list.details-template.html) and a controller, which are both defined inside the allPanelsRetrieved controller. The problem is that the modal dialog is displayed but the controller doesn't work (the click of the OK button does nothing). Where the problem may be? Thanks in advance
angular.
module('panelList')
.component('panelList', {
templateUrl: '/panel-list/panel.html',
controller: ['Panel', 'NgTableParams','$scope', '$location', '$uibModal',
function PanelListController(Panel, NgTableParams, $scope, $location, $uibModal) {
this.allPanelsRetrieved = (index, before) => {
//..hidden code here
}
this.showDetails = function () {
$uibModal.open({
templateUrl: '/panel-list/panel-list.details-template.html',
controller: function ($uibModalInstance) {
let $ctrl = this;
$ctrl.ok = function () {
$uibModalInstance.close();
};
},
}).result.then(
function (success) {
alert(success);
},
function (error) {
alert(error);
}
);
};
}]
});
Here is the template panel-list.details-template.html:
<div>
<script type="text/ng-template" id="/panel-list/panel-list.details-template.html">
<div class="modal-header">
<h3 class="modal-title">Modal title</h3>
</div>
<div class="modal-body">
Modal content
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="$ctrl.ok()">Close</button>
</div>
</script>
Use $scope to make it work in the AngularJS way. Here is a working plnkr demo of what you try to achieve.
$uibModal.open({
templateUrl: '/panel-list/panel-list.details-template.html',
controller: function ($uibModalInstance, $scope) {
$scope.ok = function () {
$uibModalInstance.close();
};
}
}).result.then(
function (success) {
alert(success);
},
function (error) {
alert(error);
}
);
View
<script type="text/ng-template" id="/panel-list/panel-list.details-template.html">
<div class="modal-header">
<h3 class="modal-title">Modal title</h3>
</div>
<div class="modal-body">
Modal content
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">Close</button>
</div>
</script>
While the angular.component implementation provides a default for the controllerAs syntax...
controllerAs: identifierForController(options.controller) || options.controllerAs || '$ctrl',
...it appears that angular-ui-bootstrap does not.
Simply provide a value for controllerAs in your $uibModal options to continue using the preferred syntax.
$uibModal.open({
templateUrl: '/panel-list/panel-list.details-template.html',
controllerAs: '$ctrl',
controller: function($uibModalInstance) {
let $ctrl = this;
$ctrl.ok = function () {
$uibModalInstance.close();
}
}
http://plnkr.co/edit/q1arN18553XoUZEuPcPl?p=preview
The problem is with this keyword as you are using it. Use arrow function instead and it will work:
$uibModal.open({
templateUrl: '/panel-list/panel-list.details-template.html',
controller: ($uibModalInstance) => {
let $ctrl = this;
$ctrl.ok = function () {
$uibModalInstance.close();
};
},
})

Parameter not Resolving in Angular Modal

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');
};
});

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

How to pass form data from angular ui bootstrap modal to view

I'm creating a webapp and I want to implement an option to add friends. I've created the add friend page as a modal with a text input field. I want to test this by displaying the input on my view page. How do I display this data onto my view page?
Here's what I currently have
index.html
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<form name = "addFriendForm">
<input ng-model = "user.name"class="form-control" type = "text" placeholder="Username" title=" Username" />
{{ user.name }}
</form>
<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()">Add Friend</button>
<div> Username: {{user.name}}</div>
</div>
my JavaScript file:
angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $modal, $log) {
$scope.user = {name: ""}
$scope.open = function () {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function () {
$scope.user.name = user.name;}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
});
angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $modalInstance) {
$scope.ok = function () {
$modalInstance.close($scope.user.name);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});
plunkr: http://plnkr.co/edit/JIoiNx47KXsY8aqbTUDS?p=preview
Resolve - plunkr
You could make use of modalInstance's resolve property; this acts as the link between the modal instance and the parent controller.
You inject the object in to the ModalInstanceController, and assign it to the scope of your modal instance.
UI Bootstraps resolve works exactly the same as ngRouter's; as such if for whatever reason resolve cannot resolve an object, the modal will not open.
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
resolve: {
user: function() {
return $scope.user;
}
}
});
Scope - plunkr
An alternative, and arguably simpler method would be to pass in the parents scope in to the modal. Note that currently this doesn't work when using controllerAs syntax on the parent controller.
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
scope: $scope
});
I would suggest using the promise from the result to set the value to your controller's variables instead. The "resolve" from my understanding is for passing controller's variable to the dialog for using inside the dialog, not to be changed directly. In your code example, passing result you set in $modalInstance.close() to modalInstance.result.then() will do the trick. In other words, changing line #18 and #19 to the following,
modalInstance.result.then(function (data) {
$scope.user.name = data;
To improve the code a bit, you can actually pass the entire user object to allow adding additional attributes such as email, address, etc. to your user object easily. I had create an example at http://plnkr.co/edit/oztYRNrCRlF1Pw289i1M?p=preview.

Categories