AngularJS uiRouter access controller from other view

I have simple hierarchical state:

angular
    .module('App.Module.Suppliers', [])
    .config(function($stateProvider) {
        return $stateProvider
            .state('suppliers', {
                url: '/suppliers',
                views: {
                    main: {
                        templateUrl: 'views/layouts/wrapper.html'
                    }
                }
            })
            .state('suppliers.edit', {
                url: '/:id',
                views: {
                    entity_view: {
                        templateUrl: 'views/layouts/foo.html'
                    }
                }
            })
            .state('suppliers.edit.details', {
                url: '/edit',
                views: {
                    entity_sub_view: {
                        controller: function () {
                            this.foo = {bar: "TEST HEADER"};
                        },
                        controllerAs: 'vm',
                        templateUrl: 'views/layouts/main.html'
                    }
                }
            });
    });

main and entity_view views are generic for all entities and only entity_sub_view changes with core information.


Now in entity_view I want to use some value like <h2>{{vm.foo.bar}}</h2> but it seems that I can't access vm inside these parent states.

Is there a way to pass this and other parameters to parent states to use?

1 answer

  • answered 2020-10-30 07:36 Justinas

    So I found solution that fits my need. Basically you can set controllerAs to top-most state and access it via $scope:

    angular
        .module('App.Module.Suppliers', [])
        .config(function($stateProvider) {
            return $stateProvider
                .state('suppliers', {
                    url: '/suppliers',
                    views: {
                        main: {
                            templateUrl: 'views/layouts/wrapper.html'
                            controller: function () {
                                this.foo = null;
                            }
                            controllerAs: 'mainCtrl'
                        }
                    }
                })
                .state('suppliers.edit', {
                    url: '/:id',
                    views: {
                        entity_view: {
                            templateUrl: 'views/layouts/foo.html'
                        }
                    }
                })
                .state('suppliers.edit.details', {
                    url: '/edit',
                    views: {
                        entity_sub_view: {
                            controller: function () {
                                this.foo = {bar: "TEST HEADER"};
                            },
                            controllerAs: 'vm',
                            templateUrl: 'views/layouts/main.html'
                        }
                    }
                });
        });
    

    And in some controller do

    this.$scope.mainCtrl.foo = {bar: "TEST HEADER"};
    

    In view

    {{mainCtrl.foo.bar}}