Confused by AngularUI modal documentation

Question

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>
        }
});

Marian Ban Marian Ban · Accepted Answer · 2014-09-11T11:32:51

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');
        };
    }
]);

Confused by AngularUI modal documentation

1 Answers