AngularJS Tutorial - 6.2

In this part we will discover how to add a dialog.

Screenshot

Download

The source for this part is here: 06_dialog_angular_ui.zip.

The samples can be run with Firefox, in general or by running, into the directory,

If you have Python 2.x: python -m SimpleHTTPServer 8000
If you have Python 3.x: python -m http.server 8000
If you have Perl:
- cpan HTTP::Server::Brick # install dependency
- perl -MHTTP::Server::Brick -e '$s=HTTP::Server::Brick->new(port=>8000); $s->mount("/"=>{path=>"."}); $s->start'
If you are under windows: "C:\Program Files (x86)\IIS Express\iisexpress.exe" /path:%CD% /port:8000

Prepraing the environment

First we need to download and include Angular-UI, and add to the customers module the reference to
the angular ui ("ui.bootstrap") module.

<script type="text/javascript" src="lib/angular/ui-bootstrap-tpls.js"></script>

Then we will add to the CustomersListController the dependency from the $modal service.
This will handle all the modal dialogs requests.

On the list controller we will add the functions that will open the dialog, for example for the edit
action we will do the following. We use the parameters

controller: the controller that will handle the dialog.
templateUrl: the resource that will contain the dialog template.
resolve: the list of objects that will be passed as dependency to the controller. They can be
services (functions), or values.

The modal open will return a "modal instance", the instance of the dialog.
When the dialog is closed (when the modalInstance.result is set) the function passed to "then"
will be executed.

		$scope.editDetail = function(id){
			var modalInstance = $modal.open(
				{
					controller:"CustomerEditController",
					templateUrl:'app/customers/edit.html',
					resolve: {
						callerData:function(){return {id:id};}
					}
				})
			modalInstance.result.then(function(){ $scope.loadData();});
		}

The controller of the dialog form

Into the CustomerEditController we will add the dependency from callerData (that we declared as
a resolved dependency some line above) and $modalInstance. This is the exact modalInstance that
is returned by the $modal.open. It contains the utility methods to handle the dialog life.

On the update(...).success we will call the function to close the dialog (and call the modalInstance.result.then
callback specified before.

	$modalInstance.close($scope.customer);

Then we initialize the title of the dialog on the scope with the variable "title"

We add even two functions on the scope. Note that we used the function "close" to close the dialog
and call the callback, while calling the dismiss will NOT call the callback!.

		$scope.ok = function(){
			update();
		}
		$scope.cancel = function(){
			$modalInstance.dismiss('cancel');
		}

The dialog content template

Continuing with the "edit" we will look at the "app/customers/edit.html" This will be made simply
wrapping the old template with its page with the various structures required by bootstrsap.

<div class="modal-header">
	<h3 class="modal-title">{AngularJS Tutorial - 6.2}</h3>
</div>
<div class="modal-body">
	<div >
		<!-- old content of the edit.html with the list of fields-->
	</div>
</div>
<div class="modal-footer">
	<button class="btn btn-primary" ng-click="ok()"  ng-disabled="editForm.$invalid || !editForm.$dirty">OK</button>
	<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>