3

$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 からこのエラーが発生します TypeError: $rootScope.items is undefined。何が起こっているのか本当にわかりません。

ここに小さな追加があります。items次のようなオブジェクトのリストを含む配列です。

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

itemsサーバーに別のリクエストを行うことなく、アイテム リスト (アイテム) に各アイテムを表示できるように、アプリで常に利用できるようにしたいと考えています。$scope.item = items[$routeParams.id]アイテムを表示する必要があるたびにアイテムを表示するだけで、これを達成するつもりです。ng-click付属の機能や通常の#/route/:param仕組みで実現できることを楽しみにしています。ありがとう

4

4 に答える 4

2

TypeError: $object.property is undefined通常、その特定のオブジェクト (またはそのプロパティ) が設定される前に、オブジェクトの参照への要求が行われるためです。$http要求は本質的に非同期であるため、他のプロセスがブロックされることはありません。リクエストを同期させようとすると、接続が非常に遅い人にとって大きな問題が発生する可能性があることは明らかです。

それとは別に、汚染$rootScopeは一般的に悪い考えです。次のリンクでグローバル変数に関するトピックを見つけることができるので、$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>

これにより、もう 1 つの「良い」プラクティスが得られます: controllerAs構文の使用です。AngularJS で名前空間を使用する方法を提供します。

もちろん、これらは単なるヒントであり、常に要件を考慮する必要があります。

于 2015-08-10T14:42:09.130 に答える
0

最後に、私は解決策を思い付くことができました。問題は、ロードと同時に$rootScope.items利用可能にすることであることに気付きました。displayCtrlしかし$rootScope.items、私のhtmlページが読み込まれると、私のビューで利用できます。そのため、アイテムIDをパラメーターとして渡し、$routeParams次のように使用して取得しました

myApp.controller('displayCtrl', function($routeParams, $scope) {
    $scope.item_id = $routeParams.id; //given that the route looks like '/item/:id'
});

次に、HTMLファイルでこれを行いました

<div ng-bind="items[item_id].name"></div>
<div ng-bind="items[item_id].price"></div>

これは実際に私の問題を解決しました。

于 2015-08-21T15:44:06.573 に答える