AngularJS accessing parent controller properties from modal controller - resolve vs $scope

Question

Learning AngularJS is a Work In Progress for me so I just want to understand why/when we should use one over another in particular case below. Is it just matter of taste or more than that? See examples below.

In both cases, when user clicks OK button, create() function of parent controller is called from child controller.

RESOLVE STYLE

CreateController

...

var vm = this;

vm.create = create;

function create() {
    console.log('Created!');
}

vm.openCreateModal = function() {
    vm.modalInstance = $uibModal.open({
        ...
        resolve: {
            create: function() {
                return create;
            },
            // Others if any
        }
    });
}

...

CreateModalController

...

vm.ok = function() {
    create();
    $uibModalInstance.close('ok');
};

...

SCOPE STYLE

CreateController

...

var vm = this;

vm.create = create;

function create() {
    console.log('Created!');
}

vm.openCreateModal = function() {
    vm.modalInstance = $uibModal.open({
        ...
        scope: $scope,
        resolve: {
        }
    });
}

...

CreateModalController

...

vm.ok = function() {
    $scope.$parent.vm.create();
    $uibModalInstance.close('ok');
};

...

Update

The actual reason why I ask this question is, accessining/injecting parent/root/container like objects of one service/controller in/to another controller/service is considered as a "bad practise" in some languages/frameworks I use.

Usage of $parent is a code smell, a symptom of a deeper problem. The resolve property is more versatile and robust because it can be different for each instance of the modal. It can also be resolved with a promise. — georgeawg
– georgeawg, Commented Aug 10, 2017 at 1:01
@georgeawg I added "Update" section to explain why I came up with this question. You stepped right on it! I just didn't like $scope.$parent... bit for some reason. I just need to wait and see what others say about it. — BentCoder
– BentCoder, Commented Aug 10, 2017 at 8:26

Ohjay44 · Accepted Answer · 2017-08-10 13:13:40Z

1

The idea of resolve is that it will run that first before initializing the rest of your code. Generally you would use resolve in your routing like so:

$routeProvider
        .when('/', {
            templateUrl: "views/view.html",
            caseInsensitiveMatch: true,
            resolve: {
                load: function() {
                    localStorage['Location'] = "/View";
                }
            }
        })

In the above example resolve will fire the load function before my controller is ever initialized. On the other hand scope is used to bind directly to something in a controller or directive. You should use scope when triggering functions and binding to values between controllers and directives.

To add to this based on the comments below, if the resolve fails it will reject the modal and the window will not open.

edited Aug 10, 2017 at 13:13

answered Aug 9, 2017 at 20:51

Ohjay44

8977 silver badges20 bronze badges

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

5 Comments

georgeawg Over a year ago

The OP is asking about the resolve property in the UI-Bootstrap Modal Directive.

svarog Over a year ago

This is the right answer, however it's worth mentioning that if the resolve fails (the promise rejects) the transition will be canceled and the modal will not show. this pattern is very common in angular.

Ohjay44 Over a year ago

I added that to my answer. @georgeawg I know he was talking about the bootstrap modal. I was just providing an example of how resolve works in Angularjs and when to use it vs scope like the OP asked.

noppa Over a year ago

This answer explains what resolve does in route config, but does not answer the question "... why/when we should use one over another [with UI-Bootstrap Modal] ..."

Ohjay44 Over a year ago

The answer still gives an explanation. resolve should be used to run code before doing a specific action like opening a window or initializing a controller or directive. It is still pertinent to the question being asked. It is just using routing as an example.

Collectives™ on Stack Overflow

AngularJS accessing parent controller properties from modal controller - resolve vs $scope

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related