AngularJS访问控制器中的对象字段答案

【问题标题】：AngularJS access object field in controllerAngularJS访问控制器中的对象字段
【发布时间】：2014-07-02 10:10:33
【问题描述】：

所以我得到了这个 AngularJS 控制器，我需要在其中使用 2 个不同的服务 Project 和 Subproject。一个通过project_id 字段链接到另一个。代码如下：

bonsControllers.controller('SubprojetDetailCtrl', ['$scope', '$routeParams', 'Project', 'Subproject',
  function($scope, $routeParams, Project, Subproject) {

    $scope.subproject = Subproject.queryFalse({projectId: $routeParams.id});     

    $scope.project = Project.queryFalse({projectId: $scope.subproject.project_id});
}]);

问题是当我在$scope.project 中使用甚至在console.log 上使用它时，$scope.subproject.project_id 的值是未定义的。

services.js 代码是：

    var bonsServices = angular.module('bonsServices', ['ngResource']);

    bonsServices.factory('Project', ['$resource',
    function($resource) {
        return $resource(URL_API + '/projects/:projectId', {}, {
            queryTrue: {method: 'GET', params: {projectId: ''}, isArray: true},         
            queryFalse: {method: 'GET', params: {projectId: ''}, isArray: false},           
            save: {method: 'POST', headers: {'Content-Type': 'application/json'}, isArray: false},
            'delete': {method: 'DELETE', params: {projectId: ''}, isArray: false},
            update: {method: 'PUT', params: {projectId: ''}, headers: {'Content-Type': 'application/json'}, isArray: false}
        });
    }]);


bonsServices.factory('Subproject', ['$resource',
    function($resource) {
        return $resource(URL_API + '/subprojects/:projectId', {}, {         
            queryFalse: {method: 'GET', params: {projectId: ''}, isArray: false}
        });
    }]);

模板代码是：

<div >
    <span>Client :</span> {{project.client.name}} <br />
    <span>Projet :</span> {{project.name}} <br />
    <span>Sous Projet :</span> {{'Saison ' + subproject.saison}} <br />
    <span>Type :</span> {{project.type}} {{subproject.project_id}}<br />
    <span>Nature :</span> {{subproject.nature}} <br />
</div>

在 Firebug 中，我可以清楚地看到 $scope.subproject 的所有元素，包括 project_id

如果你们能就这个问题给我一个提示，我将非常感激。

谢谢

【问题讨论】：

你能提供一个 plunkr 或 jsfiddle 吗？
如果您愿意，我可以提供服务代码和模板代码
是的，请提供服务代码
健全性检查：在问题中，您将其拼写为 projet 和 project；您是否在其余代码上犯了同样的错误？
No Dan ...我尝试在将代码发布到此处之前对其进行清理，但似乎我还没有做得很好该应用程序运行良好，除了那行代码

标签： javascript angularjs object factory

【解决方案1】：

当然，因为 Subproject 服务在那里有一个异步查询。完成后，它将返回一个承诺。

bonsControllers.controller('SubprojetDetailCtrl', ['$scope', '$routeParams', 'Project', 'Subproject',
  function($scope, $routeParams, Project, Subproject) {

    Subproject.queryFalse({projectId: $routeParams.id})
    .then(function(subproject){
      $scope.subproject = subproject;
      return Project.queryFalse({projectId: $scope.subproject.project_id});
    }).then(function(project){
      $scope.project = project;
    });           
}]);

而firebug之所以会记录所有元素，是因为它会记录对对象的引用，当查询完成时，控制台日志会刷新对象数据。因此，在几毫秒内，数据是未定义的，将在查询完成时填充。

为了确定，console.logged 数据在那里，只需写$scope.subproject.project_id

【讨论】：

不幸的是康斯坦丁，当我使用你的代码时，我得到了这个错误：错误：Subproject.queryFalse(...).then 不是一个函数它很奇怪，因为你提供的代码看起来是逻辑的并且与其余代码。

【解决方案2】：

以下代码对我有用，它遵循康斯坦丁的回答：

bonsControllers.controller('SubprojetDetailCtrl', ['$scope', '$routeParams', 'Project', 'Subproject',
  function($scope, $routeParams, Project, Subproject) 
  {

    var project;
    $scope.subproject = Subproject.queryFalse({projectId: $routeParams.id});
    $scope.subproject.$promise.then(function(subproject){
        project = Project.queryFalse({projectId: subproject.project_id});  
        $scope.project = project;
    }); 
  }
]);

您可能会看到 $promise.then 为我解决了这个问题。

谢谢

【讨论】：