Question

我的AngularJS应用程序中有以下设置：

.state('people.view',
{
    abstract: true,
    parent: 'people',
    views: {
        'header@maincontent': {
            templateUrl: 'partials/people/_header_view.html'
        },
        'footer@maincontent': {
            templateUrl: 'partials/people/_footer_view.html'
        }
    }
})
    .state('people.details',
    {
        parent: 'people.view',
        url: '/:personId/details',
        views: {
            'content@maincontent': {
                templateUrl: 'partials/people/details.html',
                controller: 'PeopleDetailCtrl'
            }
        }
    })
    .state('people.addressbook',
    {
        parent: 'people.view',
        url: '/:personId/addressbook',
        views: {
            'content@maincontent': {
                templateUrl: 'partials/people/addressbook.html',
                controller: 'PeopleAddressBookCtrl'
            }
        }
    })

所以我有一个详细信息和一个地址簿视图，它是具有页眉和页脚（不会改变）的人员视图状态的子项。

但是因为personId仅在子状态中传递，并且只有指定了控制器，所以这意味着我无法访问人员信息。

例如，在标题中我想显示人名。

我该怎么做？

基于@mohamedrias的以下答案，我尝试过：

.controller('PeopleDetailCtrl', ['$scope', '$rootScope', '$stateParams', 'Person',
    function($scope, $rootScope, $stateParams, Person) {
        $scope.person = Person.get({personId: $stateParams.personId}, function(person) {        
            console.log(person);
            $rootScope.person.firstname = person.firstname;
            $rootScope.person.lastname = person.lastname;
        });

    }]);

这样我就可以在标题中访问{{person.firstname}}，但是我收到错误：

TypeError: Cannot set property 'firstname' of undefined

控制台显示：

Resource {firstname: "Cameron", lastname: "Drysdale", $promise: Object, $resolved: true, $get: function…}

Answer 1

在您的子控制器中，与personId一起发出事件。

$scope.$emit('personId', personId);

在您的父控制器中：

$scope.$on('personId', function(event, personId) {
      // check for personId and process the information
});

以上是很好的做法。

否则你也可以正常方式做，但不建议这样做。

在您的子控制器中注入$rootScope：

app.controller("ChildController", function($scope, $rootScope, $routeParams) {
    $rootScope.personId = $routeParams.personId;
});

在模板标题中，您只需引用personId，它就会从$rootScope中选择值。

根据您的代码进行更新：

$rootScope.person = $rootScope.person || {};
$rootScope.person.firstname = person.firstname;

这只是为了确保$rootScope.person可用。

访问父状态中的参数

1 个答案: