CODEWITHSUNDEEP
angularjsangular-ui-bootstrap
Lu4
Lu4

Reputation: 15032

Pass data to angular's nested controller

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

Upvotes: 0

Views: 1620

Answers (1)

Shai Reznik - HiRez.io
Shai Reznik - HiRez.io

Reputation: 8948

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){

})

Upvotes: 2

Related Questions