angularjs - 我无法在我的 Controller 中访问 $rootScope

Question

我在 $rootScope 中有一些参数，如下所示:

myApp.factory('itemService', function($http) {
    return $http.get('/items');
});

myApp.run(function($rootScope, itemService) {
    itemService.success(function(response) {
        $rootScope.items = response;
    });
});

myApp.controller('displayCtrl', function($rootScope, $scope) {
    $scope.items = $rootScope.items;
});

当我运行上面的代码时，我从 Firebug 那里得到了这个错误类型错误:$rootScope.items 未定义。我真的不知道发生了什么。

这里有一点补充。 items 是一个包含对象列表的数组，如下所示:

items = [
  {'name': 'spoon', 'price': 200},
  {'name': 'table', 'price': 400},
  {'name': 'shoe', 'price': 250}
];

我希望让 items 在我的应用程序中始终可用，这样我就可以在项目列表 (items) 中显示每个项目，而无需向服务器发出另一个请求。我打算通过每次需要显示一个项目时使用 $scope.item = items[$routeParams.id] 简单地显示一个项目来实现这一点。我期待使用附加到 ng-click 的函数或正常的 #/route/:param 机制来实现这一点。谢谢

Answer 1

TypeError: $object.property is undefined 通常是因为在设置特定对象(或其属性)之前请求引用对象。 $http 请求本质上是异步的，因此其他进程不会被阻塞。很明显，尝试使请求同步可能会给连接速度非常慢的人带来重大问题。

除此之外，污染 $rootScope 通常不是一个好主意。您可以在以下 link 找到有关全局变量的主题这样您就可以调查为什么 $rootScope 不是一个好地方。

说了这么多，在我看来，您不想发出多个请求来检索相同的数据。如果是这样，您可以为 $http.get 方法使用缓存选项。

例如:

myApp.factory('itemService', function($http, $q) {
  return {
    get: function() {
      return $http({
        url: 'items.json',
        cache: true //keep the result in memory 
      });
    }
  };
})

myApp.controller('aCtrl', function(itemService) {
  var self = this;

  itemService.get().success(function(data) {
    self.items = data;
  });
});

myApp.controller('bCtrl', function(itemService) {
  var self = this;

  itemService.get().success(function(data) {
    self.items = data;
  });
});

这将确保信息被请求一次并放入缓存中。可以在不同的地方访问数据。

  <div ng-controller="aCtrl as a">
    {{a.items}}
  </div>
  <div ng-controller="bCtrl as b">
    {{b.items}}
  </div>

这给我留下了另一个“好的”实践:使用 controllerAs句法。它提供了一种在 AngularJS 中使用命名空间的方法。

当然，这些只是提示，您应该始终考虑这些要求!