Menu
following angular.ui Modal example shows the modalInstance calling a ModalIntanceCtrl which is later created as a function:
var ModalDemoCtrl = 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()); }); }; }; 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 have a 2 questions/problems:
the docs recommend creating a controller in another way (due to minification issues) for example:
myApp.controller('GreetingCtrl', ['$scope', function($scope) { $scope.greeting = 'Hola!'; }]);
But if I create the controller like this, how could I Inject it into the modalInstance?
loginCtrl, is this a problem? should I subclass somehow the loginCtrl or call it from the ModalInstanceCtrl? and if so - how exactly?I'll be glad for guidance and clarfication about this. Thanks!
465
In AngularJS, a Controller is defined by a JavaScript constructor function that is used to augment the AngularJS Scope. Controllers can be attached to the DOM in different ways.
You can't inject controllers into one another.
Injecting a value into an AngularJS controller function is done simply by adding a parameter with the same name as the value (the first parameter passed to the value() function when the value is defined).
From an AngularJS perspective, a modal window is nothing more than a Controller than manages a View-Model, interacts with Services, and is rendered by a View. The same it true for every other UI-oriented component in your AngularJS application.
You question is not very clear, but if you declare controller using the module API, then you can provide the controller to the modal service as a string
myApp.controller('ModalInstanceCtrl', ['$scope', function($scope) { $scope.greeting = 'Hola!'; }]); controller: 'ModalInstanceCtrl',
The same can be done for loginCtrl if you want to use that in the modal service.
166
I have created this plunker for those of you like myself, who like to see an example. It shows how to create a modal without polluting the global namespace. Hopefully it is helpful.
Edited to include code example as per bummi's comment below
index.html
<html ng-app="app"> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js"></script> <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"> </script> <script src="app.js"></script> <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div ng-controller="appController"> <script type="text/ng-template" id="myModalContent.html"> <div class="modal-header"> <h3>I'm a modal!</h3> </div> <div class="modal-body"> <span>Message:{{message}}</span> <ul> <li ng-repeat="item in items"> <a ng-click="selected.item = item">{{ item }}</a> </li> </ul> Selected: <b>{{ selected.item }}</b> </div> <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="showModal()">Open me!</button> <div ng-show="selected">Selection from a modal: {{ selected }}</div> </div> </body> </html> app.js
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()); }); }; } ]); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
