Angular 要声明的自定义数据 objects

Question

我正在关注此 sample 向状态 object 添加自定义数据，但无法弄清楚我做错了什么。

想法是让用户状态具有 3 个视图的模板：header、内容和页脚。 header-view 更新为 child 状态的标题和面包屑。未命名的 content-view 将显示 child 的模板（如用户列表），页脚将显示摘要数据。

我有 2 个问题：

我的 header 当前状态的自定义数据 object 未定义。 ['无法读取未定义的属性 'title']
如果我排除自定义数据并直接在控制器中设置 $scope 值，它工作正常但现在出现 404 错误。 [获取 http://localhost:3000/users 404（未找到）]。这对我来说毫无意义。

我的目标是否正确？我不确定我是否需要自定义数据，或者我可以只在控制器中设置它吗？

angular.module('users').config(['$stateProvider',
    function($stateProvider) {

        // Users state routing
        $stateProvider
        .state('users', {

            onEnter: function(){
              console.log('state change to users');
            },

            abstract: true,
            url: '/users', 
            views: {
                '': {
                    templateUrl: 'modules/users/views/users.html'
                },                  
                'header@users': {
                    templateUrl: 'modules/core/views/page-header.html',
                    // data: {              //<- this is undefined in the controller
                    //  title: 'Users',                 
                    //  breadcrumb: 'Home / Users'
                    // },
                    controller: function($scope, $state) {
                        $scope.title = 'Users'; //$state.current.data.title;
                        $scope.breadcrumb = 'Home / Users'; //$state.current.data.breadcrumb;
                    }                   
                },
                'footer@users': {
                    templateUrl: 'modules/core/views/page-footer.html'
                }
            }           
        })

        .state('users.list', {
            onEnter: function(){
                console.log('state change to users.list');
            },  

            url: '',
            templateUrl: 'modules/users/views/users-list.html'
        })

        .state('signin', {
            url: '/signin',
            templateUrl: 'modules/users/views/authentication/signin.client.view.html'  
        });
    }
]);

<section>
  <div ui-view="header"></div>

  <div ui-view=""></div>

  <div ui-view="footer"></div>
</section>

Answer 1

您收到 undefined 是因为您正在尝试访问属于状态本身的数据对象，而不是您定义它的视图。通常，数据将根据状态定义，但如果您希望针对视图这样做，则需要使用：

views: {
   'header@users': {
      data: {
        title: 'Users',
      },
      controller: function($scope, $state) {
        $scope.title = $state.current.views['header@users'].data.title;
      }
   }
}

至于您的 404 错误，代码中没有任何内容会导致此错误，因此问题一定出在其他地方。

Angular 要声明的自定义数据 objects

Angular custom data to state objects

javascript

angularjs

angular-ui-router