メソッドの取得時にオブジェクトのリストが動的に更新されない

Question

ユーザー用のインターフェースを作成して、製品を作成、追加、削除、編集できるようにしました。製品には、ユーザーが製品を作成するときに指定できる説明とタイプがありますが、ユーザーが製品を作成または編集したときに、製品をリストしているリストは新製品で動的に更新されません。

<div> 
    <h1>Products</h1> 
    <md-button class="md-primary md-raised" ng-click="showModalEdit()"> 
    New Product 
    </md-button> 
    <div class="row"> 
    <table class="table table-striped"> 
     <thead> 
     <tr> 
      <td><b>Description</b></td> 
      <td><b>Type</b></td> 
      <td align="center"><b>Editar</b></td> 
      <td align="center"><b>Excluir</b></td> 
     </tr> 
     </thead> 

     <tbody> 
     <tr ng-repeat="product in products"> 
      <td>{{product.description}}</td> 
      <td>{{product.type.description}}</td> 
      <td align="center"> 
      <span class="glyphicon glyphicon-edit" aria-hidden="true" ng-click="btnEditProduct(product)"></span> 
      </td> 
      <td align="center"> 
      <span class="glyphicon glyphicon-remove-circle" aria-hidden="true" ng-click="showConfirm(product._id)"></span> 
      </td> 
     </tr> 
     </tbody> 
    </table> 
    </div> 
</div> 

ユーザーは新製品のボタンをクリックすると、モーダルはそう、彼はその後、彼はその製品オブジェクトを渡す関数を呼び出す作成]ボタンをクリックし、説明と製品タイプを書くことができます表示されますそれはデータベースに保存することができます。

<md-button ng-click="addProduct(product)"> 
    Create 
</md-button> 

コントローラー：

$scope.showModalEdit = function() { 
    var useFullScreen = ($mdMedia('sm') || $mdMedia('xs')) && $scope.customFullscreen; 
    $mdDialog.show({ 
    //clickOutsideToClose: true, 
    controller: DialogProduct, 
    scope: $scope, 
    templateUrl: '../../views/editproduct.html', 
    plain: true, 
    fullscreen: useFullScreen 
    }).then(function(answer) { 
    console.log('fechou a modal', $scope.product) 
    }, function closeModalEdit() { 
    console.log('fechou a modal', $scope.product) 
    }); 
    $scope.$watch(function() { 
    return $mdMedia('xs') || $mdMedia('sm'); 
    }, function(wantsFullScreen) { 
    $scope.customFullscreen = (wantsFullScreen === true); 
    }); 
}; 

$scope.addProduct = function(newProduct) { 
    //This service is just returning the type ID of the product that was set before 
    newProduct.type = serviceShareProductType.get(); 
    serviceProduct.save(newProduct, function(data){ 
    $scope.getProducts(); 
    $mdDialog.hide(); 
    }, function(err){ 
    }); 
} 

$scope.getProducts = function() { 
    serviceProduct.query(function(data) { 
    $scope.products = data.value; 
    console.log(data); 
    },function(err){ 
    }); 
} 

サービス：

get: function (idproduct, success, error) { 
    $http.get(ipServer+'product/'+idproduct).success(success).error(error); 
} 

私がconsole.log（製品のリスト）を作成したばかりのユーザーが作成した新製品は他の製品と同じですが、ユーザーはページを更新する必要があります。

Answer 1

getProducts()を呼び出す必要があります。getProducts()を使用して、HTTPリクエストを保存し、productsの配列を更新します。

Answer 2

製品オブジェクトを渡す関数を呼び出すときに$scope.$apply()に電話する必要があると思います。この記事は私に多くの助けとなりました。 http://jimhoskins.com/2012/12/17/angularjs-and-apply.html