AngularJS ui Router access controller 换个角度看

Question

我有简单的分层状态：

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 和 entity_view 视图对所有实体都是通用的，只有 entity_sub_view 核心信息发生变化。

现在在 entity_view 中，我想使用像 <h2>{{vm.foo.bar}}</h2> 这样的值，但似乎我无法在这些父状态中访问 vm。

有没有办法将这个和其他参数传递给父状态使用？

Answer 1

所以我找到了适合我需要的解决方案。基本上你可以将 controllerAs 设置为 top-most 状态并通过 $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'
                    }
                }
            });
    });

并且在一些控制器中做

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

可见

{{mainCtrl.foo.bar}}

AngularJS ui Router access controller 换个角度看

AngularJS uiRouter access controller from other view

angularjs

angular-ui-router