Passing parameters to Angular UI router template

Question

My angular ui router is changing states/views as:

    $stateProvider
        .state({
            name: 'home',
            url: '/',
            template: '<home-view></home-view>',
        })

Is there way pass bound parameters to < home-view > in UI router ?

E.g.

<home-view my-data="dataObject">

or

<home-view my-data="myService.getMyData()">

Controller for my-view is located in own file with the actual template & directive.

Answer 1

In the end colleague of mine helped with this issue. Solution uses resolve to get the data and then passes it as router scope variable to the template. Important learning was that controller defined in the router has it's own scope and not scope of the "home-view". In my home controller router controller could be accessed via $scope.parent.

.state({
    name: 'home',
    url: '/',
    resolve: {
        cData: (MyService) => {
            return MyService.getMyData()
        }
    },
    controller: function (cData) {
        this.data = cData;
    },
    controllerAs: 'ctrl',
    template: '<home-view my-data="ctrl.data"></home-view>'
})

Answer 2

You can use a resolver

$stateProvider
    .state({
        name: 'home',
        controller : "MyController"
        url: '/',
        resolve: {
            obj: function() {
                return {prop:"hello!"}
            }
        }
        template: '<home-view></home-view>',
})

// MyController
angular.module('app').controller('MyController', function(obj) {
    console.log(obj.prop); // hello!
});