I have a completely working version of the ui.bootstrap.modal as per the example here http://angular-ui.github.io/bootstrap/#/modal but I want to take a stage further and add it to my controller configuration.
Perhaps I'm taking it too far (or doing it wrong) but I'm not a fan of just
var ModalInstanceCtrl = function ($scope...
My modal open controller:
var controllers = angular.module('myapp.controllers', []);
controllers.controller('ModalDemoCtrl', ['$scope', '$modal', '$log',
function($scope, $modal, $log) {
$scope.client = {};
$scope.open = function(size) {
var modalInstance = $modal.open({
templateUrl: 'templates/modals/create.html',
controller: ModalInstanceCtrl,
backdrop: 'static',
size: size,
resolve: {
client: function () {
return $scope.client;
}
}
});
modalInstance.result.then(function (selectedItem) {
$log.info('Save changes at: ' + new Date());
}, function () {
$log.info('Closed at: ' + new Date());
});
};
}
]);
Modal instance controller:
var ModalInstanceCtrl = function ($scope, $modalInstance, client) {
$scope.client = client;
$scope.save = function () {
$modalInstance.close(client);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
However I would like to change this last controller to:
controllers.controller('ModalInstanceCtrl', ['$scope', '$modalInstance', 'client',
function ($scope, $modalInstance, client) {
$scope.client = client;
$scope.save = function () {
$modalInstance.close(client);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
}
]);
If I also update the controller reference within $scope.open for ModalDemoCtrl controller to
controller: controllers.ModalInstanceCtrl
then there are no errors but the save and cancel buttons within the modal window no longer work.
Could someone point out where I am going wrong - possibly a fundamental lack of understanding of the way controllers work within the AngularJS?!
Controller specified in $scope.open needed single quotes around it.
controller: 'ModalInstanceCtrl',
You are referencing your module to variable controllers.
All controllers in angular systems has unique names.
The controller is still "ModalInstanceCtrl" not "controllers.ModalInstanceCtrl".
Related
Brand new to Angular. I have a controller that when I add it to my list of script files on in index.html page, my site stops working and I get blank pages for all of my views. I'm not sure what I'm doing wrong? I'm adding the controller to my index.html file like this
<script src="app/components/common/ModalDemoCtrl.js"></script>
And I'll paste my controller code below if that's part of the problem.
var app = angular.module('crm.ma', ['ngAnimate', 'ui.bootstrap']);
app.controller('ModalDemoCtrl', function ($scope, $uibModal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.animationsEnabled = true;
$scope.open = function (size) {
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
$scope.toggleAnimation = function () {
$scope.animationsEnabled = !$scope.animationsEnabled;
};
});
app.controller('ModalInstanceCtrl', function ($scope, $modalInstance, items) {
$scope.items = items;
$scope.selected = {
item: $scope.items[0]
};
$scope.ok = function () {
$modalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});
If anyone could help me that'd be great. Thanks in advance.
The service $uibModal has been introduced very lately, in version 0.14.0 of ui-bootstrap. I guess you are still on a version < 0.14.0 of ui-bootstrap, therefore, replace:
$uibModal
with
$modal
Or update ui-bootstrap to 0.14+
I am trying to use AngularUI modal's and I cannot seem to figure out why it is not resolving my variables.
Function that opens the modal and the modal instance
$scope.openModal = function (size, cert) {
var modalInstance = $modal.open({
template: 'ModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
certs: function () {
return $scope.certification;
}
}
});
modalInstance.result.then(function () {});
};
Modal Controller some stuff in here is leftover from debugging
angular.module('myApp').controller('ModalInstanceCtrl', ['$scope', '$filter', '$modalInstance', function ($scope, $filter, $modalInstance, certs) {
console.log(certs);
var results = $filter('filter')(certs, {id: id})[0];
$scope.cert = results;
$scope.ok = function () {
$modalInstance.close();
};
}]);
The main issue is that when it gets into the controller I am getting undefined for certs even though it should be resolved by the openModal function. I was following the official angular UI tutorial on how to do them here: Angular UI Bootstrap Modals
In your injection of 'certs' into your controller, you need to add it to the name declaration as well as the function.
angular.module('myApp').controller('ModalInstanceCtrl', ['$scope', '$filter', '$modalInstance', 'certs', function ($scope, $filter, $modalInstance, certs) {
I'd like to have my Angular Ui Modal controller/object declared outside
it's triggering controller (& in another file), without polutting the
global namespace.
Is this possible? Is it possible to declare the modal controller
like a regular controller and somehow pass parameters in (from my
trigger controller)?
I currently have: (which ain't cool)
(function () {
TriggeringCtrl.$inject = ['$scope', 'htmlClient', 'apiCall', '$timeout', '$modal', 'utility'];
function TriggeringCtrl($scope, htmlClient, apiCall, $timeout, $modal, utility) {
};
app.controller('TriggeringCtrl', TriggeringCtrl);
var ModalCtrl = function ($scope, $modalInstance, node, apiCall, utility) {
}
});
You have example here which is not global:
http://plnkr.co/edit/fCfvcnwP9JSHbX5L2Vuu?p=preview
var app = angular.module('plunker', ['ui.bootstrap']);
app.controller('ModalDemoCtrl', function ($scope, $modal, $q, $timeout) {
$scope.open = function () {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: function ($scope, $modalInstance, items) {
$scope.items = items;
$scope.ok = function () {
$modalInstance.close('item');
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
},
resolve: {
items: function () {
var p = $q.defer(); /// simulate data
$timeout(function(){
p.resolve(['item1', 'item2', 'item3']);
});
return p.promise.then(function(data){
return data;
});
}
}
});
};
});
I have the following AngularJS below which opens up a dialog and I type into 2 input fields and press ok() which will write the values of the inputs to my $scope.
This works but when I open the modal again and enter more details into the input fields and click ok() I am trying to add this to the current input object in my $scope but instead it is just over-writing it.
var theApp = angular.module('theApp', []);
var app = angular.module('theApp', ['ui.bootstrap']);
app.controller('MenuSideController', ['$scope','$modal','$log', function($scope, $modal, $log) {
var ModalInstanceCtrl;
$scope.createmarker = function () {
var modalInstance = $modal.open({
templateUrl: 'template/modal-add-marker.html',
controller: ModalInstanceCtrl,
resolve: {},
scope: $scope.$new()
});
modalInstance.result.then(function (selectedItem) {
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
ModalInstanceCtrl = function ($scope, $modalInstance) {
$scope.input = [];
$scope.ok = function () {
$modalInstance.close($scope.input);
console.log($scope);
$scope.gps = "";
$scope.title = "";
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
$scope.plotmarkers = function($scope) {
console.log($scope);
};
}]);
Check out my code in Plunker
I would add/change to modalInstance:
modalInstance.result.then(function (selectedItem) {
$scope.keys.push({title: selectedItem.titley, gps:selectedItem.gps, desc:selectedItem.desc});
}
Demo Plunker
You are just using the reference address to the value, if you use angular.copy(your-object) it will create a new instance that will not be overridden when you reopen the modal.
I'm not sure I understand your question, but I think what you're trying to do is have the modal push selections into an array in the parent controller? If so, you simply need to change your modalInstance.result.then function to something like this
var ModalDemoCtrl = function ($scope, $modal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.selected = {};
$scope.selected.items = [];
$scope.open = function () {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected.items.push(selectedItem);
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
};
For a full working example, see here: http://plnkr.co/edit/IA8qTX29DDIS1jXqx3gw?p=preview
i am trying to use the modal directive from ui-bootstrap 0.6
here is the working default plunker from the ui-bootstrap page:
http://plnkr.co/edit/JGBiBSeRqOnwRhYA9py8?p=preview
now, i tried to make the coding style fits angular-seed style to include it in one app like this :
http://plnkr.co/edit/Y59rwlcNpQdijKtmjOPy?p=preview
angular.module('MyModal', ['ui.bootstrap', 'MyModal.controllers']);
angular.module('MyModal.controllers', [])
.controller('ModalDemoCtrl', [ '$scope', '$modal', '$log', function ($scope, $modal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function () {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
}])
.controller('ModalInstanceCtrl', [ '$scope', '$modalInstance', 'items', function ($scope, $modalInstance, items) {
$scope.items = items;
$scope.selected = {
item: $scope.items[0]
};
$scope.ok = function () {
$modalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
}]);
but it's giving an error ReferenceError: ModalInstanceCtrl is not defined
how can i make this work using this way of defining controllers ?
Provide controller name as String, exactly as you would do in route definitions, directives etc.:
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
resolve: {
items: function () {
return $scope.items;
}
}
});
You can use quotes as the other answer suggests, or you can also do as the example in the docs and define the variable:
var ModalInstanceCtrl = function ($scope, $modalInstance, items) { ... }