Pass data to angular's nested controller

Question

The problem

I'm using UI Bootstrap's dialog service in my application, this service creates modal dialog and I do that using the following method on my outer $scope:

$scope.showRouteEditDialog = function (template, route) {
    // argument `route` is not currently used

    var dialog = $dialog.dialog({
        backdrop: true,
        keyboard: false,
        backdropClick: true,
        templateUrl: template,
        controller: 'RouteController'
    });


    dialog.open().then(function(result) {
        alert(result); // This line is called when dialog is closed
    });
}

This method is later called from partial view with the following markup

<a href="#" ng-click="showRouteEditDialog('Templates/Content/Timeline/Item/Editor.html', route)"><i class="halflings-icon edit"></i></a>

My dialog handles editing of a route (route is a sub-model within main model) and therefore I would like to pass that route to the dialog so that it treats it like it's own model without knowing anything about the outer model.

My initial guess on this problem was to assign the route argument to dialog variable, something like dialog.route = route and have it later used within controller with the following code:

Application.controller('RouteController', ['$scope', 'dialog', function ($scope, dialog) {
    // `dialog` is our dialog and it is injected with injector
    doSomethingWith(dialog.route)
}]);

Though this approach creates a dependency and doesn't look like an angular's way of doing things

I have also found this post saying that I should be using service for that purpose, but it seems like this solution is an overkill for such minor problem.

Question

What is the angular way of passing a value from outer controller to an inner one with scenario described above.

Thank you

score 2 · Accepted Answer · answered Jun 28 '13 at 08:38

2

You can use "resolve" -

var dialog = $dialog.dialog({
  resolve: {route: function(){return "route"}}
});

and later you can inject the "route" value inside of your controller

.controller("SomeCtrl",function(route){

})

answered Jun 28 '13 at 08:38

Shai Reznik - HiRez.io

8,748
2
33
33

Thank you, it worked, but how did it work? I wasn't using "resolve" previously. What is it? – Lu4 Jun 28 '13 at 09:21
"members that will be resolved and passed to the controller as locals" - from: https://github.com/angular-ui/bootstrap/blob/master/src/dialog/README.md You also have it in the ui-router or the $route service as a way to pass use case specific params into a generic controller – Shai Reznik - HiRez.io Jun 28 '13 at 09:31

Pass data to angular's nested controller

The problem

Question

1 Answers1