AngularJS Tutorial - 6.2

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

Screenshot

Download

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

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

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

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>

Last modified on: April 14, 2015