Question

我是棱角分明的新人，我有一个问题。

我想从DB获取承诺数据并通过输入显示它。

这是我的意见：

    // not editable
    <input type="text" ng-model="currentMedCenter.name"/>

这是我的'currentMedCenter'模型控制器：

    function AccountProfileController($scope, medicalCenterService, doctorService) {
        //get information from singleton service
        $scope.currentMedCenter = medicalCenterService.currentMedCenter;
    }

我通过$ http.get从DB获取数据，该数据包含在单件服务中。

这是singleton medicalCenterService：

.factory('medicalCenterService', function (MedicalCenterResource) {

    var medicalCenterService = {};

    medicalCenterService.currentMedCenter = MedicalCenterResource.getCurrentMedicalCenter();

    return medicalCenterService;
})

这是对服务器的查询：function'getCurrentMedicalCenter（）'：

getCurrentMedicalCenter: function () {
      var deferred = $q.defer();

            $http.get('Api/MedicalCenter/GetCurrentMedicalCenter').success(function(data) {
                deferred.resolve(data);
            });

            return deferred.promise;
}

在服务器上查询后，我得到JSON对象如下：

  {
    "id": 1,
    "name": "Medical center #1"
  }

此对象成功存储在singleton service medicalCenterService.currentMedCenter中。并在UI侧输入医疗中心名称。

我想更新我的'currentMedcenter'模型，但是当我尝试编辑输入中的值时，我无法更改其中的任何内容。我无法添加新符号或删除之前的符号。

我正在使用1.0.8角度版本。

Answer 1

首先，将currentMedCenter重写为：

getCurrentMedicalCenter: function () {
   return $http.get('Api/MedicalCenter/GetCurrentMedicalCenter');
}

无需在此创建新承诺。

然后在你的工厂改变：

medicalCenterService.currentMedCenter = MedicalCenterResource.getCurrentMedicalCenter();

是：

MedicalCenterResource.getCurrentMedicalCenter().success(function(data) {
   medicalCenterService.currentMedCenter = data;
});

因此，您将currentMedCenter设置为promise的值而不是promise本身。

编辑：

下一个问题是您将输入绑定到currentMedCenter。起初这只是一个空对象。然后当http服务返回变量currentMedCenter然后被更改为指向新数据，同时输入仍然具有指向旧数据的指针的值，因此不会得到更新。

要解决此问题，您需要将对象传递给不会更改的控制器。该对象应包含指向currentMedCenter的属性。由于此对象不会更改，控制器将会发现对象属性确实发生了变化。

即使在Javascript中，指针也会让你失望！

将工厂更改为：

.factory('medicalCenterService', function (MedicalCenterResource) {

    var medicalCenterService = {currentMedCenter: {data: {}}};
    MedicalCenterResource.getCurrentMedicalCenter().then(function(d) {
        medicalCenterService.currentMedCenter.data = d;    
    });
    return medicalCenterService;
})

请注意返回的对象现在如何具有属性数据，并且当promise解析时，此属性将被设置。

然后绑定输入时：

<input type="text" ng-model="currentMedCenter.data.name"/>

请参阅此jsFiddle

使用输入更新ng-model数据

1 个答案: