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;
});
}
}
});
};
});
Related
I am new to Angular and confused by the documentation for AngularUI modal dialog. I don't see how the code presented there would fit in with the controller for the main page, or how a button on the main page, when clicked, would open the modal dialog.
http://angular-ui.github.io/bootstrap/
Is ModalDemoCtrl supposed to be appended to the controllers of the main page's app?
var myApp = angular.module('myApp', ['ui.bootstrap']);
var ModalDemoCtrl = function($scope, $modal, $log) {
<snip>
}
myApp.controller("ModalDemoCtrl");
or is the ModalDemoCtrl function object simply nested within the main page's controller?
var myApp = angular.module('myApp', ['ui.bootstrap']);
myApp.controller("MainPageCtrl", function($scope, $modal, $log) {
var ModalDemoCtrl = function($scope, $modal, $log) {
<snip>
}
});
Basically it is a regular controller:
var modal = $modal.open({
templateUrl: 'deleteDialog.html',
controller: 'deleteDialogController'
});
modal.result.then(function () {
});
deleteDialogController.js file:
appModule.controller("deleteDialogController", [ "$scope", "$modalInstance",
function ($scope, $modalInstance)
{
$scope.ok = function () {
$modalInstance.close();
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
}
]);
The following code is right from angular-ui getting started page: http://angular-ui.github.io/bootstrap/#/getting_started. I've modified it for a log in modal and would like to call the API that authorizes the user before the dialog is closed.
var ModalDemoCtrl = function ($scope, $modal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function (size) {
var modalInstance = $modal.open({
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());
});
};
};
// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.
Here is where I'd like to be able to call the service. But I haven't been able to get the function to access anything I have that's external to it. It seems to recognize objects (hence items), but if I inject a service into ModalDemoCtrl I'm getting an undefined error when I try to access it.
var 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');
};
};
I believe this was answered previously somewhere on Stack, but even better here is a Plunkr for a concrete example:
http://plnkr.co/edit/4GcKLz?p=preview
angular.module('app', ['ui.bootstrap']).
service('DataService', ['$rootScope',
function($rootScope) {
this.data = {};
this.data.message = 'This is a message from a service';
this.data.items = ['item1', 'item2', 'item3'];
}
]).
controller('myModal', ['$scope', '$modalInstance', 'DataService',
function($scope, $modalInstance, dataService) {
$scope.data = dataService.data;
$scope.message = dataService.data.message;
$scope.items = dataService.data.items;
$scope.selected = {
item: $scope.items[0]
};
$scope.ok = function() {
$modalInstance.close($scope.selected.item);
};
$scope.cancel = function() {
$modalInstance.dismiss('cancel');
};
}
]).
controller('appController', ['$scope', '$modal', '$log', 'DataService',
function($scope, $modal, $log, dataService) {
$scope.data = dataService.data;
$scope.showModal = function() {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'myModal'
});
modalInstance.result.then(function(selectedItem) {
$scope.selected = selectedItem;
}, function() {
$log.info('Modal dismissed at: ' + new Date());
});
};
}
]);
HTH!
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".
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) { ... }
The modal in angular-ui example is implemented with a ModalInstanceCtrl inside a ModalDemoCtrl controller like so:
var ModalDemoCtrl = function ($scope, $modal, $log) {
$scope.open = function () {
var modalInstance = $modal.open({
...
controller: ModalInstanceCtrl,
...
});
...
};
};
var ModalInstanceCtrl = function ($scope, $modalInstance, items) {
...
$scope.ok = function () {
$modalInstance.close($scope.selected.item);
};
};
When trying this approach by registering the Controllers with angular like so:
app.controller('ModalInstanceCtrl', ['$scope', '$modal', '$log',
function ($scope, $modalInstance, items) {
...
$scope.ok = function () {
$modalInstance.close($scope.selected.item);
};
}]);
app.controller('ModalDemoCtrl', ['$scope', '$modal', '$log', 'ModalInstanceCtrl',
function ($scope, $modal, $log, ModalInstanceCtrl) {
$scope.open = function () {
var modalInstance = $modal.open({
...
controller: ModalInstanceCtrl,
...
});
...
};
}]);
I get the following error:
Error: Unknown provider: ModalInstanceCtrlProvider <- ModalInstanceCtrl
Should it be possible to nest controllers like this in angular?
You don't need to inject ModelInstanceCtrl into your ModalDemoCtrl. The controller definition should be
app.controller('ModalDemoCtrl', ['$scope', '$modal', '$log',
function ($scope, $modal, $log) {
It should work without this too. If it does not try
var modalInstance = $modal.open({
...
controller: 'ModalInstanceCtrl',
...
});