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?

Community · Accepted Answer · 2017-05-23 12:15:40Z

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

edited May 23, 2017 at 12:15

CommunityBot

11 silver badge

answered Apr 20, 2015 at 7:41

Kaspars Ozols

7,0371 gold badge22 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Michael Tot Korsgaard Over a year ago

A quick additional question: How would it look if I wanted to use some of the variables from the EntryCtrl in the new nameless controller?

Kaspars Ozols Over a year ago

I edited my answer to add that part. Could you validate if it works as expected?

Michael Tot Korsgaard Over a year ago

That works. However you need to write 'outerscope' before the function. You are missing the '

Kaspars Ozols Over a year ago

Ooops, missed that! Such silly mistakes happen when writing code off the top of my head. Updated my answer to fix this error.

0xtuytuy Over a year ago

I sill dont understand how can i call for example the function $scope.cancel in the modal from the EntreCtrl

|

Collectives™ on Stack Overflow

Call Modal functions in Controller - AngularJS

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related