Question

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

我们的想法是让用户状态的模板具有3个视图：标题，内容和页脚。使用子状态的标题和痕迹更新标头视图。未命名的内容视图将显示子模板（如用户列表），页脚将显示摘要数据。

我有两个问题：

我标题当前状态的自定义数据对象未定义。 ['无法读取未定义的属性'标题'
如果我排除自定义数据并直接在控制器中设置$ 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错误，代码中没有任何内容会导致此错误，因此问题必须放在其他地方。

角度自定义数据到状态对象

1 个答案: