Develop Reference

AngularJS $uibModal as a service with different controllers

I'm sitting with this question for a while.
I'm wondering how you can add different kind of controllers and different templateUrl from angularjs to $uibModal. So that You don't have that much code that actually does the same thing. Only on different controller and different template.
This is what I have done so far:
vm.addDialogue = function () {
vm.formData = {};
var modalInstance = $uibModal.open({
animation: true,
templateUrl: 'views/modals/add.dialogue.html',
controller: 'addDialogueController',
controllerAs: 'vm',
backdrop: 'static',
resolve: {
formData: function() {
return vm.formData;
},
selectedTab: 1,
editTime: false
}
});
};
vm.addProject = function(){
vm.formData = {};
var modalInstance = $uibModal.open({
animation: true,
templateUrl: 'views/modals/add.project.html',
controller: 'addProjectController',
controllerAs: 'vm',
backdrop: 'static',
resolve: {
formData: function () {
return vm.formData;
}
}
});
modalInstance.result.then(function (newProject) {
vm.errorMessage = null;
vm.projects.unshift(savedProject);
}, function () {
console.info('Modal dismissed at: ' + new Date());
});
}
This works but I have five more of these Modals, I'm trying to find something that these seven fit in one function and not seven different functions.
I have also tried putting this all in once controller instead of the controllers they belonged in. That worked for a moment but then it didn't showed some buttons that were supposed to be on a page.

Well, you could abstract your code by using a service and parse your params into. This service will handle the uibModal instance. In that way you could avoid your duplicate code.
AngularJS example application & service:
var myApp = angular.module('myApp', []);
//simple controller
myApp.controller('MyCtrl', function (myModalService) {
//open modal
myModalService.openModal('views/modals/add.project.html', 'addProjectController');
//close on click
$scope.close = function () {
myModalService.modalInstance.close();
}
});
// my simple modal service
myApp.service('myModalService', function() {
this.modalInstance = null;
this.openModal = function (templateUrl, controller) {
this.modalInstance = $uibModal.open({
animation: true,
templateUrl: templateUrl,
controller: controller,
controllerAs: 'vm',
backdrop: 'static',
resolve: {
formData: function() {
return vm.formData;
}
}
});
return this.modalInstance;
}
return this;
});

crop doesn't work inside bootstrap modal

i'm using ngimgcrop to crop images and it works fine in but I tried to display the images inside uibmodal it doesn't work.
I tried some solutions(use ng-init ..)but None worked for me.
and in the console the image is empty.
here is my controller :
var app = angular.module('app', ['ngImgCrop', 'ui.bootstrap']);
app.controller('Ctrl', ['$scope',
'$rootScope',
'$uibModal',
'$log',
function($scope,
$rootScope,
$uibModal,
$log)
{
$scope.animationsEnabled = true;
$scope.open = function (size) {
// alert('open mthod is called');
$scope.test = 5;
var modalInstance = $uibModal.open({
animation: true,
ariaLabelledBy: 'modal-title',
ariaDescribedBy: 'modal-body',
templateUrl: "imageModal.html",
controller: 'Ctrl',
controllerAs: '$ctrl',
size: size
});
modalInstance.result.then(function (selectedItem) {
$log.info('selected value:'+selectedItem);
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
$scope.size='small';
$scope.type='circle';
$scope.imageDataURI='';
$scope.resImageDataURI='';
$scope.resImgFormat='image/png';
$scope.resImgQuality=1;
$scope.selMinSize=100;
$scope.resImgSize=200;
$scope.test=225;
//$scope.aspectRatio=1.2;
$scope.onChange=function($dataURI) {
console.log('onChange fired');
};
$scope.onLoadBegin=function() {
console.log('onLoadBegin fired');
};
$scope.onLoadDone=function() {
console.log('onLoadDone fired');
};
$scope.onLoadError=function() {
console.log('onLoadError fired');
};
$scope.uploadFile = function(file) {
if (file) {
// ng-img-crop
var imageReader = new FileReader();
imageReader.onload = function(image) {
$scope.$apply(function($scope) {
$scope.imageDataURI= image.target.result;
});
};
imageReader.readAsDataURL(file);
$scope.open();
}
};
console.log(' my image', $scope.imageDataURI);
$scope.$watch('resImageDataURI',function(){
console.log('Res image', $scope.resImageDataURI);
});
}]);
imagemodal.html :
<div ng-if="enableCrop=true" class="cropArea" ng-class="{'big':size=='big', 'medium':size=='medium', 'small':size=='small'}">
<img-crop image="imageDataURI"
result-image="$parent.resImageDataURI"
change-on-fly="changeOnFly"
area-type="{{type}}"
area-min-size="selMinSize"
result-image-format="{{resImgFormat}}"
result-image-quality="resImgQuality"
result-image-size="resImgSize"
on-change="onChange($dataURI)"
on-load-begin="onLoadBegin()"
on-load-done="onLoadDone()"
on-load-error="onLoadError()"
></img-crop>
<!--aspect-ratio="aspectRatio"-->
Demo:
demo

If yout want to show cropped image from controller to modal, using resolve in this parametr put variable result-image of img-crop. just like :
var modalInstance = $uibModal.open({
animation: true,
ariaLabelledBy: 'modal-title',
ariaDescribedBy: 'modal-body',
templateUrl: "imageModal.html",
controller: 'Ctrl',
controllerAs: '$ctrl',
size: size,
resolve:{
croppedImg:$scope.imageCrop
}
});
when your imageCrop look like
<img-crop image="imageDataURI"
result-image="imageCrop"
in modal controler inject croppedImg as normal provider/service/factory just like:
function Ctrl($scope, croppedImg, ..another, ..etc)
in this way, in controller you got cropped image in your modal controler. Then only
$scope.newImg = croppedImg
and show in modal as <img src="{{newImg}}">
Hope you understand.

Set options after angular modal opened

How can I set options on an angularUi Modal after it is opened?
I create my modal with
var popup = $modal.open({
templateUrl: 'parts/payments/views/ConfirmPayoutModal.html',
controller: 'PayoutCtrl',
windowClass: 'payout-modal',
});
and I can access it in my 'PayoutCtrl' via a $modalInstance, for example
$modalInstance.close();
But how can I set options for the modal when something happens, after it is opened?
backdrop: 'static',
keyboard: false

You can use like this.
Html code
<div class="modal-header">
<button type="button" ng-hide="ispromiseprogress==true" class="close" ng-click="cancel()" aria-hidden="true"><i class="glyphicon glyphicon-remove"
style="color:black"></i></button>
<h4 class="modal-title">Login</h4>
</div>
$scope.ispromiseprogress=false;
$scope.open = function () {
modalInstance = $modal.open({
templateUrl: 'login.html',
windowClass: 'app-modal-window',
backdrop: false,
keyboard: false,
modalFade: true,
scope: $scope,
controller: function ($scope, $modalInstance, $http) {
$scope.getData=function(){
$scope.ispromiseprogress=true;
$http.get(myurl)
.success(function(data){
$scope.ispromiseprogress=false;
$scope.login={};
$scope.login.status=false;
})
.error(function(data){
$scope.ispromiseprogress=false;
window.location="/logout"
})
}
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
}
})
}

Angular unit test

I am extends bootstrap modal like this:
.directive("modal", [function(){
var controller = function($scope, $attrs, $element, $uibModal){
var defaultOptions = {
title: "Modal title",
content: "Modal body",
controller: "DefaultModalController",
templateUrl: "js/dev/shared/directives/templates/default-modal-template.html"
};
$element.on($scope.event, function(){
var userOptions = {
title: $attrs.title,
content: $attrs.content,
templateUrl: $attrs.templateUrl,
controller: $attrs.controller
};
options = angular.extend({},defaultOptions, userOptions || {});
$uibModal.open({
templateUrl: options.templateUrl,
controller: options.controller,
resolve: {
options: function () {
return options
}
}
});
});
};
return {
restrict: "A",
scope: {
event: "#"
},
controller: ["$scope", "$attrs", "$element", "$uibModal", controller]
}
}])
.controller("DefaultModalController", ["$scope", "$modalInstance", "options",
function($scope, $modalInstance, options){
$scope.modalOptions = options;
$scope.close = function(){
$modalInstance.close();
}
}]);
and my test looks like this:
descr
ibe("ModalDirective", ()=>{
var element,
compile,
scope,
controller;
beforeEach(module("app.directive"));
beforeEach(inject((_$compile_, _$rootScope_, _$controller_)=>{
compile = _$compile_;
controller = _$controller_;
scope = _$rootScope_.$new();
element = angular.element("<button modal>test</button>")
}));
it("should create default modal window", ()=>{
element = compile(element)(scope);
console.error(element.html());
expect(true).toBeTruthy();
})
});
but when compile(element)(scope) is executing I've got this error:
TypeError: 'undefined' is not an object (evaluating 'd.indexOf')
at a (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js:179)
What should I do to fix it?
[ EDIT ]
I fixed this, the problem was in creating directive.
In directive definition I have:
scope: {
event: "#"
}
and my template was <button modal>test</button> when I changed it to <button modal event='click'>test</button> problem was solved.

Working with modals in angularjs

I've got this piece of code here
<div ng-repeat="item in items" class="col-sm-4 portfolio-item">
<script type="text/ng-template" id="myModalContent.html">
However, I can't access {{item}} within the script tags. Is there a way I can insert id and type from outside the div tags? Sorry for the newbie question.
Here is the code for the controller:
.controller('listCtrl', function($scope, $modal, $log, $stateParams, items) {
$scope.animationsEnabled = true;
$scope.open = function(size) {
var modalInstance = $modal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
item: function() {
return $scope.item;
}
}
});
modalInstance.result.then(function(selectedItem) {
$scope.selected = selectedItem;
}, function() {
$log.info('Modal dismissed at: ' + new Date());
});
};
$scope.toggleAnimation = function() {
$scope.animationsEnabled = !$scope.animationsEnabled;
};
})
// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.
.controller('ModalInstanceCtrl', function($scope, $modalInstance, items) {
$scope.items = items;
$scope.selected = {
items: $scope.items
};
$scope.ok = function() {
$modalInstance.close($scope.selected.item);
};
$scope.cancel = function() {
$modalInstance.dismiss('cancel');
};
})

You can't access item object in modal template because it's compiled in isolated scope child of the $rootScope, so there is not way for modal contents to inherit items.
What you want to do is to provide a base scope for the modal instance. Try this:
var modalInstance = $modal.open({
scope: $scope, // <--- use this scope as the base for new scope
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
item: function() {
return $scope.item;
}
}
});
In above snippet, modal service will create new child scope from the passed $scope, in which case modal scope will inherit prototypically items objects.