Call Modal functions in Controller - AngularJS

Question

I have a project where I'm using the ui.bootstrap, and according to the tutorial I followed I have to set it up similar to this:

'use strict';

angular.module('academiaUnitateApp')
  .controller('EntryCtrl', function ($scope, $modal) {
    $scope.open = function () {
        var modalInstance = $modal.open({
            templateUrl: 'modal.html',
            controller: 'ModalCtrl'
        })
    };
  });

'use strict';

angular.module('academiaUnitateApp')
  .controller('ModalCtrl', function ($scope, $modalInstance) {
    $scope.ok = function () {
        $modalInstance.close();
    };

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

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

<script type="text/ng-template" id="modal.html">
        <div class="modal-header">
            <h3 class="modal-title">I'm a modal!</h3>
        </div>
        <div class="modal-body">
            <p class="alert alert-danger">
                WARNING: By deleting the article all it's nested articles will be moved to the article holding this one.
                <br/>
                Do you still want to delete this article?
            </p>
            <button class="btn btn-primary" ng-click="delete()">Yes</button>
            <button class="btn btn-primary" ng-click="cancel()">No</button>
            <span ng-show="error.state" class="alert alert-danger">{{ error.message }}</span>
            <span ng-show="done.state" class="alert alert-success">{{done.message}}</span>
        </div>
        <div class="modal-footer">
            <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
        </div>
</script>

This works find and all, but what if I want to move the $scope.delete function inside the EntryCtrl controller instead of having it in a separate controller?

Answer 1

You can pass in anonymous controller. That would allow you to have all the logic in a single file.

In your case it would look like this:

'use strict';

angular.module('academiaUnitateApp')
  .controller('EntryCtrl', function ($scope, $modal) {
    $scope.open = function () {
        var modalInstance = $modal.open({
            templateUrl: 'modal.html',
            controller: [
                '$scope', '$modalInstance', function($scope, $modalInstance) {
                   $scope.ok = function () {
                        $modalInstance.close();
                    };

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

                    $scope.delete = function () {
                        $modalInstance.dismiss('cancel');
                    };
                }
            ]
        })
    };
  });

EDIT

You can pass variables by defining resolve function and adding variables in inner controller definition. I have used this to pass values in one-way fashion but never for two-way binding. I think you should be able to pass outer scope as well.

I don't know if it works, so be warned! :)

'use strict';

angular.module('academiaUnitateApp')
  .controller('EntryCtrl', function ($scope, $modal) {
    $scope.myValue = 'foobar';
    $scope.open = function () {
        var modalInstance = $modal.open({
            templateUrl: 'modal.html',
            controller: [
                '$scope', '$modalInstance', 'outerScope', function($scope, $modalInstance, outerScope) {
                   $scope.ok = function () {
                        $modalInstance.close();
                    };

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

                    $scope.delete = function () {
                        $modalInstance.dismiss('cancel');
                    };
                }
            ],
            resolve: {
                outerScope: function() {
                    return $scope;
                }
            }
        })
    };
  });

PS. Haven't tested code above, just put it together from your provided code

For more details see my answer here:

https://stackoverflow.com/a/29461685/3070052