Angular 将解析的对象传递给 Ng 模型答案

【问题标题】：Angular Passing Resolved Objects To Ng-ModelAngular 将解析的对象传递给 Ng 模型
【发布时间】：2016-11-04 16:50:28
【问题描述】：

我认为这应该很容易，因为我以前做过，但显然我第一次很幸运，或者 Angular 有一些我还没有解决的怪癖。

我想要做的是能够编辑客户订单。所有客户订单都使用 PHP 作为 JavaScript 对象从数据库发送到客户端。

没关系，当我想通过模式窗口（有自己的范围）编辑这些订单时，我的问题出在 Angular 内部。基本上，模式中会弹出一个表单，要求用户编辑 Javascript 对象，但是当然没有用户想要编辑原始对象，因此它是一个将 ng-models 绑定到该对象的表单。我的问题是 ng-model 似乎没有获取我的对象引用。

所以我们开始（我在下面有一个 plunker）：

这是第一次在页面上获取客户订单的控制器（在用户启动模态编辑订单之前）：

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() 函数的调用方式如下：

<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>

这部分工作正常。但是，当我确实点击编辑功能时，这会将我们带入一个新的范围和一个新的控制器，特别是下面的那个：

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

希望很清楚，我所做的只是将订单对象传递给模式。

现在对我来说，我所做的只是将相同的订单对象传递给这个新的控制器。但问题是，当我调查这个最新订单时，它没有$$hashkey。我之所以这么说是因为接下来的问题，正如我之前说过的那样，除了在那种情况下，我从 ng-repeat 内部传递了 order 对象，最后一步起作用了。但是在这里当我这样做时它不起作用。

我的意思是，当我尝试让模态模板中的模型与传递给模态控制器的订单对象对齐时，它们不会。我只是得到空白输入，这不好，因为要编辑客户订单，您需要现在的当前订单是什么，否则就像您重新开始一样。

这是带有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 模型。这是那里，我从模态的控制器控制台记录它，我可以看到它已设置，但模型是空白的。那么为什么会这样呢？为什么在console.log() 显示对象以$$hashkey 传递之前它会起作用？我不能再次从 ng-repeat 传递，因为我只有一个订单，所以在第一个模板中没有什么可以迭代的。

请帮忙。我需要能够使用 ng-model 编辑订单，以便管理员可以编辑订单并将新的订单对象发送回我的服务器。

编辑：添加了一个插件：https://plnkr.co/edit/x6FPiS6OtF2gdn4ZtFyJ?p=preview

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

乍一看，问题似乎出在您的解决功能上

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;
                    }}
            });

        }
      }); 
    }

您的订单解析函数应返回 $scope.order 试试看，让我知道这是否有效。我只是凭直觉行事

【讨论】：

我之前有过，我把它改成了order，希望它是一个更直接的对象引用。在这种情况下，$scope.order 和 order 都引用同一个对象，并且这两个选项都不会产生预期的结果。

【解决方案2】：

我通过更改变量名让它工作，我猜出于某种原因它正在寻找旧的 $scope.order 而不是解析为模态的那个？

不管怎样，这里有一个工作人员......

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

【讨论】：