javascript - 为什么使用 ng-model 时无法设置输入值？

Question

我正在尝试填充表单中的一些默认字段。据我所知，AngularJS 的方式是使用 Controller 来设置这些值。我正在使用组件 - 鉴于大多数在线示例不使用此布局，我开始感到遗憾。

组件.js

angular.
  module('patientInfo').
  component('patientInfo', {
    templateUrl: 'patient-info/patient-info.template.html',
    controller: ['$http', '$routeParams',
      function PatientInfoController($http, $routeParams, $scope) {
        var self = this;
        this.patientId = $routeParams.patientId;

        $http.get("patients/" + this.patientId + ".json").then(function(response) {
          self.patient = response.data;
        });
      }
    ]
  });

template.html

<div class="container-fluid">
  <h1>{{$ctrl.patient[0].first_name}} {{$ctrl.patient[0].last_name}}</h1>
  <div class="col-md-2">
    <!--Sidebar content-->
  </div>

  <div class="col-md-10">
    <!--Body content-->
    <form action="" >
      <p>First Name: <input type="text" ng-model="first_name"></p>
      <p>Last Name: <input type="text" ng-model="last_name"></p>
      <p>Patient Date of Birth: <input type="text" ng-model="patient_dob" ></p>
    </form>
  </div>
</div>

我想要完成的是使用 JSON 文件中的元素填充所有这些字段(名称、出生日期)。我的问题可能有两个:

1. 当我写 $scope.first_name = "anything" 时，我被告知无法设置未定义的属性“first_name”。为什么会这样？
2. 假设我弄清楚了第一项，我将如何使用 JSON 文件中的字段(self. Patient 或 response.data)？我可以写:$scope.first_name = self.patent[0].first_name吗？我的直觉是否定的，那么在我的 Controller 中引用 JSON 数据的正确方法是什么？

额外问题:与更传统的 Controller 定义相比，在使用这样的组件时应该注意哪些特性？我对 Web 开发还比较陌生，并且发现自己对完成同一件事的方法数之多感到不知所措。

示例响应数据只是一个具有单个值的 JSON 数组:

[{"first_name": "John", "last_name": "Doe", "hospital_name": "Mayo Clinic","dob": "01/01/01"}]

Answer 1

第一个问题已在评论中得到解答，我们来讨论第二个问题。

答案是肯定的，你可以这样写:

Object.assign

$http.get("patients/" + this.patientId + ".json").then(function(response) {
        //this will copy all properties from response.data[0] into $scope
        Object.assign($scope, response.data[0]);
    });

收到请求后，您将能够看到这些字段中的数据。但有时 $digest 循环(更新 html 中所有值的 angular.js 东西)不会对异步调用使用react，因此您可以尝试使用此代码

angular.
  module('patientInfo').
  component('patientInfo', {
    templateUrl: 'patient-info/patient-info.template.html',
    controller: ['$http', '$routeParams', '$scope', '$timeout',
      function PatientInfoController($http, $routeParams, $scope, $timeout) {
        var self = this;
        this.patientId = $routeParams.patientId;

        $http.get("patients/" + this.patientId + ".json").then(function(response) {
          $timeout(function() {
            Object.assign($scope, response.data[0])
          });
        });
      }
    ]
  });

在最后一个片段中，我添加了来自 Angular 的 $timeout 指令，该指令在执行后触发 $digest 周期