角オブジェクトに$$ハッシュキーがありません

Question

ProductMenuController私はIdを渡してサーバーから出力します。

例：私はIdを渡すと

• 、私は適切な出力を取得しています。
• Idを2に設定すると、出力オブジェクトに$$hashkeyがなくなり、出力が表示されません。

画像1を出力しました。$$haskeyが存在しますが、出力2には$$hashkeyがありません。

なぜこのエラーが発生するのですか。

HTMLコード：

<div class="col-md-4 col-sm-4 col-xs-12" ng-repeat="product in ProductMenuCtrl.products | filter: SearchName | filter: priceRange"> 
    <div class="" style="border: 1px solid #d8d8d8;"> 
     <div class=""> 
      <img src="{{product.ProductImage1}}" class="img-responsive" /> 
     </div> 

     <div class="row" style="padding:0.5em"> 
      <div class="col-md-12"> 
       <div> 
        <a ui-sref="index.productDetails({productId:{{product.ProductsId}}})" class="product-name">{{product.ProductName}}</a> 
        <div class="row"> 
         <div class="col-md-6"> 
          <div class="m-t text-left pull-left"> 
           <a ui-sref="index.productDetails({productId:{{product.ProductsId}}})" class="btn btn-xs btn-outline btn-info">Info <i class="fa fa-info-circle"></i> </a> 
          </div> 
         </div> 
         <div class="col-md-6"> 
          <div class="m-t text-right pull-right"> 
           <span class="label label-danger" style="font-size:1em">MRR: <i class="fa fa-rupee"></i> {{product["MRR"]}}</span> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

JS：

function ProductMenuController($http , $stateParams, $scope) { 
    var pmenu = this; 
    var vm = this; 

    $http({ 
     url: 'xxx/api/Product/ProductBySubCategoryId/getById?', 
     method: 'GET', 
     headers: { 
      'Content-Type': 'application/x-www-form-urlencoded' 
     }, 
     params: { subCategoryId: $stateParams.subCategoryId } 
    }).then(function (response) { 
     pmenu.products = response.data; 
    }); 
} 

JSON出力：

[{ 
    "ProductsId": 2013, 
    "ProductName": "Hemodiaz", 
    "ProductDescription": "Introduction ECG300G three channel ECG is such a kind of electrocardiograph .", 
    "MRR": 35000, 
    "ProductImage1": "w", 
    "ProductImage2": null, 
    "ProductImage3": null, 
    "ProductImage4": null, 
    "ProductImage5": null, 
    "BriefProduct": "\tHemodiaz Lifesciences Pvt Ltd.\tModel No:Dr Diaz HDECG300G\tMachine Type:Resting/Diagnostic\tDisplay Type:LCD\tPower Supply:Both\tWarranty In Years:1 Yr\tWarranty Available:Brand Warranty\t12\tDisplay Size(In cm):3.5\tNo. of leads:12\tRechargable Battery:Yes\tSmart Features:Smart Phone intergation", 
    "SubCategorysSubCategorysId": 0, 
    "BrandBrandsId": 0, 
    "Brand": null, 
    "Bubbles": [], 
    "ProductLikes": [], 
    "ProductReviews": [], 
    "SalesOrders": [], 
    "SubCategory": null, 
    "Rooms": [], 
    "Suppliers": [], 
    "BubbleGroupings": [] 
}, { 
    "ProductsId": 2014, 
    "ProductName": "s", 
    "ProductDescription": "s", 
    "MRR": 77, 
    "ProductImage1": "7", 
    "ProductImage2": null, 
    "ProductImage3": null, 
    "ProductImage4": null, 
    "ProductImage5": null, 
    "BriefProduct": "7", 
    "SubCategorysSubCategorysId": 0, 
    "BrandBrandsId": 0, 
    "Brand": null, 
    "Bubbles": [], 
    "ProductLikes": [], 
    "ProductReviews": [], 
    "SalesOrders": [], 
    "SubCategory": null, 
    "Rooms": [], 
    "Suppliers": [], 
    "BubbleGroupings": [] 
}] 

のみ最初の製品が表示されます。

Answer 1

hmmm私が考えているのは、ビューをレンダリングできませんが、レンダリングされた最初のレンダリングは奇妙なので、$ scope.applyと$ scope.digestを使用してレンダリングを強制してビューを更新します。

行うことは悪い説明here

のビットは、あなたは$スコープを使用する必要がある場合、あなたはおそらくイベントに耳を傾けるまたは1つを放出する必要がありますトッドモットーpost

を読むことをお勧めします、またはモデル変更の$ watch。上記に基づいて、モデルの振る舞いをコントローラーに再度結びつけるのは良い考えではありません。 Controllerを使用すると、$範囲を挿入することができますが、同じ動作をFactoryに抽象化する方法について考えることができます。 $ scopeオブジェクトは、コントローラに依存関係を注入し、必要に応じて使用することができます。

まずだから、ちょうどそれを試してみてのマジックを見てみましょうスコープの代わりに、ビューモデル

を使用するようにHTMLを更新し

$scope.$apply(function() { 
      $scope.products = response.data; 
     }); 

の下にこれであなたの$scope.products = response.data;をラップ$scope.products = response.data; にこのpmenu.products = response.data;を変更。あなたに役立つことを願っています。