Question

console.log表示变量未定义，但我的另外两个console.log正在说：

我有一个控制器：

app.controller('ProductDetailCtrl', ['$scope', '$resource', 'Product', function($scope, $resource, Product) {
  $scope.init = function(id)
  {
    $scope.product = Product.get({productId: id});
  }

  $scope.$watch('product', function() {
    console.log($scope.product); //<-- prints out a resource with products_colors
    $scope.selected_color = $scope.product.products_colors[0];
  });

  // $scope.selected_color = $scope.product.products_colors[0];

}]);

工厂：

app.factory('Product', ['$resource', function($resource) {
  return $resource("/api/products/:productId", {}, {
    query: {method: 'GET', isArray: true},
  });
}]);

观点：

<div ng-controller="ProductDetailCtrl" ng-init="init(<%= @product.id %>)">


    <select ng-model="selected_color" ng-options="product_color as product_color.color.name for product_color in product.products_colors"></select>
    {{ product.products_colors[0] }} <!-- {"id":31,"color_id":4,"product_id":30,"mens":true,"womens":true,"created_at":"2014-05-27T20:26:03.000Z","updated_at" ... } -->


</div>

但是，我浏览器中的控制台说：

Error: $scope.product.products_colors is undefined @http://localhost:3000/assets/products/controllers/productscontroller.js?body=1:9:5 $RootScopeProvider/this.$get</Scope.prototype.$digest@http://localhost:3000/assets/angular.js?body=1:12448:23 $RootScopeProvider/this.$get</Scope.prototype.$apply@http://localhost:3000/assets/angular.js?body=1:12713:13 bootstrap/doBootstrap/<@http://localhost:3000/assets/angular.js?body=1:1420:9 invoke@http://localhost:3000/assets/angular.js?body=1:3919:7 bootstrap/doBootstrap@http://localhost:3000/assets/angular.js?body=1:1419:1 bootstrap@http://localhost:3000/assets/angular.js?body=1:1432:5 angularInit@http://localhost:3000/assets/angular.js?body=1:1345:5 @http://localhost:3000/assets/angular.js?body=1:21818:5 jQuery.Callbacks/fire@http://localhost:3000/assets/jquery.js?body=1:3100:1 jQuery.Callbacks/self.fireWith@http://localhost:3000/assets/jquery.js?body=1:3212:7 .ready@http://localhost:3000/assets/jquery.js?body=1:3424:3 completed@http://localhost:3000/assets/jquery.js?body=1:3454:3


return logFn.apply(console, args);

发生了什么事？这与我的工厂和$ resource的使用有关吗？因为当我对JSON响应进行硬编码而不是使用Product.get(..)时，它可以完美地运行，如您所见：http://jsfiddle.net/joshdmiller/HB7LU/。我通过直接转到http://localhost:3000/api/products/30

来检查我的API是否正常工作

== UPDATE ==

我尝试了@lucuma和@Darren的建议，但它不起作用：

app.controller('ProductDetailCtrl', ['$scope', '$resource', 'Product', function($scope, $resource, Product) {
  $scope.product = {};

  $scope.init = function(id)
  {
    $scope.product = Product.get({productId: id});
  }

  $scope.$watch('product', function(newVal) {
    if (angular.isUndefined(newVal)) {
      return;  
    }  


    console.log($scope.product);
    $scope.selected_color = $scope.product.products_colors[0];
  });

  // $scope.selected_color = $scope.product.products_colors[0];

}]);

颜色全部加载到选择中，但仍然存在错误，默认选项仍为空

Answer 1

因为手表在资源返回之前正在评估，所以它会引发错误。您可以进行此更改，它可能会起作用：

$scope.$watch('product', function(newVal) {
  if (angular.isUndefined(newVal))  <--  add this line to check if undefined -->
    return;  

  console.log($scope.product); //<-- prints out a resource with products_colors
  $scope.selected_color = $scope.product.products_colors[0];

});

Answer 2

不确定您的产品服务是如何连接的，但可能会在$ scope.product应用之前准备好您的视图。

所以尝试设置$ scope.product = {};在控制器的第一行上正确设置对象的存在。

Answer 3

我认为您工厂的问题是您在对象从Api返回之前实例化页面。因此，您需要承诺从Api解析数据。一个例子是

 $scope.init = function(id)
  {
    var thisProduct = Product.get({productId: id});
    thisProduct.$promise.then(function(data){
       $scope.produce = data;
    }
  }

希望有所帮助，

帕特里克

AngularJS：$ scope表示使用$ resource时变量未定义

3 个答案: