CODEWITHSUNDEEP
javascriptangularjsangular-ui-router
domokun
domokun

Reputation: 3003

Is there a way to pass variables to a controller from ui.router?

I have a page structured with some nested views, using ui.router and I would like to pass some data from the parent controller to the child controller, without injecting useless services into the child controller.

In my mind, something like these would be perfect

        state('home', {
            url: "/home",
            templateUrl: "parts/home.html",
            controller: "FatherController"
        }).
        state('home.child', {
            url: "/child",
            templateUrl: "parts/home/child.html",
            controller: "ChildController",
            params: {$scope.data = $rootScope.someData}
        })


Do you happen to know if there is a way to do this?

Upvotes: 4

Views: 13095

Answers (4)

vperron
vperron

Reputation: 530

Well, I guess you don't always have the choice to move the data to a parent controller or such.

My recommendation for this would be to use resolvers (https://github.com/angular-ui/ui-router/wiki#resolve) to do some magic.

Here's a sample on how it could be made to work:

var dataResolver = ['$scope', '$stateParams', 'Service',
    function($scope, $stateParams, Service) {
        Service.get($stateParams.objectId).then( function(obj) {
            $scope.myObject = obj;
            return obj;
        });
     };
 ];

 $stateProvider.state("foo.details", {
     "url": '/foo/:objectId', 
     "resolve": { "data": dataResolver },
     "controller": "SomeController",
     "template": "<ui-view />"
 )

And you magically get the $scope.obj data when the controller is instanciated, whatever how.

Upvotes: 6

trungvose
trungvose

Reputation: 20034

Well, in my projects I use resolve of Angular UI router.

Basically, when initializing the parent state, It will retrieve data from the server and store it into listItem. You also can separate the logic of making request to server using a service and inject it into config.

Suppose I click somewhere in the parent state to open the new child state with an Id as a query string. Then we get this id by $stateParams and filter to find the correct item in listItem (using Underscore)

route.js

.state('parent', {
    url: '/parent',
    templateUrl: 'parent-template.html',
    controller: 'ParentController',
    resolve: {
        listItem: ['$http', '$stateParams', function ($http, $stateParams) {
            return $http.get({'/GetListItem'}).then(function successCallback(response) {
                return response.data;
            }, function errorCallback(response) {
                return [];
            });
        }]
    }
})
.state('parent.child', {
    url: '/{itemId}',
    templateUrl: 'child-template.html',
    controller: 'ChildController',
    resolve: {
        item: ['$stateParams', 'listItem', function ($stateParams, bundles) {
            return _.findWhere(listItem, { Id: $stateParams.itemId });
        }]
    }
})

Then you can access to listItem and item in the controller like below.

parent.controller.js

(function () {
    function ParentController($scope, listItem) {

    }

    ParentController.$inject = ['$scope', 'listItem']

    angular.module('app').controller('parentController', ParentController)
})()

child.controller.js

(function () {
    function ChildController($scope, item) {

    }

    ChildController.$inject = ['$scope', 'item']

    angular.module('app').controller('childController', ChildController)
})()

Upvotes: 0

Joseph Silber
Joseph Silber

Reputation: 219930

If your child view is nested within the parent view, your child controller will automatically inherit the parent scope.

You should be able to access the parent controller's data directly from the child controller.

Upvotes: 11

Prasad K - Google
Prasad K - Google

Reputation: 2584

You can use Query Parameters and access using $stateParams

https://github.com/angular-ui/ui-router/wiki/URL-Routing

Upvotes: 1

Related Questions