角度を渡す解決済みオブジェクト

Question

私は前にそれをやったので、これは簡単なものであるべきと思ったが、私は幸運明らかに初めて、どちらかそれまたは角度は、私はまだ周り私の頭をラップしていないいくつかの癖を持っています。私がやろうとしている何

は、顧客の注文を編集することができます。すべての顧客の注文は、PHPを使用してJavaScriptオブジェクトとしてデータベースからクライアントに送信されます。結構です

私は（独自のスコープを持っている）モーダルウィンドウを通じて、これらの命令を編集したいとき、私の問題は、角度の範囲内です。基本的には、モーダルにフォームがポップアップして、ユーザーにJavascriptオブジェクトを編集するように要求します。ただし、未処理のオブジェクトを編集する必要はありません。そのため、ng-modelsがそのオブジェクトに関連付けられたフォームです。私の問題はngモデルが私のオブジェクト参照を拾うように見えないことです。

は、そこでここでは、（私は以下のplunkerを持っている）に行く：

これは、ページ上の顧客の注文をフェッチコントローラ初めて（ユーザーが注文を編集するモーダルを開始する前に）次のとおりです。

この部分は正常に動作し

<div class="container" style="margin-top:2%;"> 
<div class="row"> 
<div class="col-xs-12" style="text-align:center;"> 
<p class="whiteNoPointy">Customer Name : @{{order.orderProperties.firstName + " " + order.orderProperties.lastName}}</p> 
</div> 
<div class="col-xs-12" style="text-align:center;"> 
<p class="whiteNoPointy">Pickup : @{{order.orderProperties.pickupDate + " in " + order.orderProperties.location}}</p> 
</div> 
<div class="col-xs-12" style="text-align:center;"> 
<p class="whiteNoPointy"><i class="fa fa-envelope" aria-hidden="true"></i> : @{{order.orderProperties.email}}</p> 
</div> 
<div class="col-xs-12" style="text-align:center;"> 
<p class="whiteNoPointy"><i class="fa fa-phone" aria-hidden="true"></i> : @{{order.orderProperties.phone}}</p> 
</div> 
<div class="col-xs-12" style="text-align:center;"> 
<button type="button" style="border-radius:0;" class="btn btn-warning" ng-click="edit(order)">Edit This Order</button> <button type="button" style="border-radius:0;" class="btn btn-danger">Delete or Refund This Order</button> <button type="button" style="border-radius:0;" class="btn btn-primary">Complete This Order</button> 
</div> 
</div> 
</br></br> 
<div class="shipping whiteNoPointy text-center" ng-repeat="specific in order.order"> 
<div class="col-xs-12" ng-if="specific.quantity.value>0"><p>@{{specific.quantity.value}} @{{specific.Name}}</p></div> 
</div></div> 

：

controller: function($scope,$http,$stateParams,$uibModal) { 
     $http({ 
     method: 'GET', 
     url: 'http://example.com/orderDATA', 
     params: {id: $stateParams.id} 
     }).then(function successCallback(html) { 
     html.data[0].orderProperties = JSON.parse(html.data[0].orderProperties); //format data from server so that JavaScript can play with it 
     $scope.order = html.data[0]; 
     $scope.edit = function (order) //function that launches modal window 
     { 
      var modalInstance = $uibModal.open({ 
       animation: $scope.animationsEnabled, 
       templateUrl: 'EditOrderInstance.html', 
       controller: 'EditOrderCtrl', 
       scope: $scope, 
       size: "lg", 
       resolve: { 
        order: function() { 
         return order; 
        }} 
      }); 

     } 
     }); 
    } 

edit()機能は、そう、次のテンプレートからのように呼ばれています。しかし、私はは下記具体的には、1つの、新しいスコープと新しいコントローラに私たちを取ること、編集機能を打ったんとき：うまくいけば明らかであるように、私がしたすべては、順序オブジェクトを渡す

app.controller('EditOrderCtrl', ['$scope', '$http', '$uibModal','$uibModalInstance', 'order', function($scope, $http, $uibModal, $uibModalInstance, order) { 
     $scope.order = order; 

ましたモーダルへ

は、今の私に、私がやったすべては、周りの同じ順序オブジェクトを渡し、そして今、この新しいコントローラです。しかし、問題は、この最新の注文を調べると、$$hashkeyがないということです。私はこれを次のような問題のために言います。私は前にこのことをしていましたが、前の例ではng-repeatの中から注文オブジェクトを渡しました。しかし、ここで私はそれを行うときに動作しません。私は何を意味

は、私は、モーダルのコントローラに渡された順序オブジェクトとモーダルテンプレートラインアップでモデルを持ってしようとすると、そうではない、です。私は空の入力を得るだけです。これは、現在の注文が何であるかを今必要とする顧客注文を編集するためではありません。そうでなければ、あなたがやり直しているようです。ここで

はng-modelとテンプレートです。

<script type="text/ng-template" id="EditOrderInstance.html"> 
     <div class="modal-header" style="text-align:center;"> 
      <h3 class="modal-title">Edit Order</h3> 
     </div> 
     <div class="modal-body" style="text-align:center;"> 
     <form name="order" novalidate> 
    <label for="firstName">First Name</label> 
    <input type="text" name="firstName" class="form-control" ng-model="order.orderProperties.firstName" ng-minlength="2" required> 
    <p ng-show="orderorderProperties.firstName.$error.minlength" class="warning">Please put your full first name.</p> 
    </div> 
    <button ng-disabled="order.$invalid||totalPrice===0" ng-click="submitOrder()" class="btn btn-default">Submit</button> 
</form> 
     </div> 
     <div class="modal-footer" style="text-align:center;"> 
      <button class="btn toggledz" type="button" ng-click="save()">Submit</button> 
      <button class="btn" type="button" ng-click="cancel()">Cancel</button> 
     </div> 
    </script> 

order.orderProperties.firstName ng-modelに注意してください。これがそこにあります、私はコンソールをモーダルのコントローラからログオンし、設定されているのがわかりますが、モデルは空です。それでなぜこれが当てはまるのですか？ console.log（）がオブジェクトが$$hashkeyで渡されたことを示した前に、なぜ動作しましたか？私はng-repeatからもう一度渡すことができません。なぜなら、私は1つの注文しかないので、最初のテンプレートでは何も繰り返しません。

助けてください。 ng-modelを使用して注文を編集できるようにする必要があります。管理者は注文を編集して新しい注文オブジェクトを自分のサーバーに送り返すことができます。

編集：追加されましたplunker：初見からhttps://plnkr.co/edit/x6FPiS6OtF2gdn4ZtFyJ?p=preview

Answer 1

私は変数名を変更することによって動作するようになった、何かの理由で、それは旧式の$scope.orderをモーダルに解決したのではないかと思ったのだろうか？とにかく

は、ここでの作業plunkerは、私が前に、私はそれがより直接的オブジェクト参照になることを期待してorder` `にそれを変更することを持っていた...

https://plnkr.co/edit/AZpeFGaBktFjSr2SL2Rv?p=preview

Answer 2

は、問題は、オーダーのためにあなたの決意機能を

controller: function($scope,$http,$stateParams,$uibModal) { 
 
     $http({ 
 
     method: 'GET', 
 
     url: 'http://example.com/orderDATA', 
 
     params: {id: $stateParams.id} 
 
     }).then(function successCallback(html) { 
 
     html.data[0].orderProperties = JSON.parse(html.data[0].orderProperties); //format data from server so that JavaScript can play with it 
 
     $scope.order = html.data[0]; 
 
     $scope.edit = function (order) //function that launches modal window 
 
     { 
 
      var modalInstance = $uibModal.open({ 
 
       animation: $scope.animationsEnabled, 
 
       templateUrl: 'EditOrderInstance.html', 
 
       controller: 'EditOrderCtrl', 
 
       scope: $scope, 
 
       size: "lg", 
 
       resolve: { 
 
        order: function() { 
 
         return $scope.order; 
 
        }} 
 
      }); 
 

 
     } 
 
     }); 
 
    }

あなたの解決機能のように見えるはずreturn $ scope.order これを試してみてください。私は本能とちょうど一緒に行く