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

Question

我正在尝试填充表单中的一些默认字段。据我所知，AngularJS 方法是使用控制器来设置这些值。我正在使用组件 - 我开始后悔了，因为大多数在线示例都不使用这种布局。

component.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 文件中的元素填充所有这些字段（姓名、出生日期）。我的问题可能有两个方面：

当我写 $scope.first_name = "anything" 时，我被告知 Cannot set property 'first_name' of undefined。为什么会这样？
假设我弄清楚了第一项，我将如何使用 JSON 文件（self.patient 或 response.data）中的字段？我可以写：$scope.first_name = self.patient[0].first_name吗？我的直觉是否定的，那么在我的控制器中引用 JSON 数据的正确方法是什么？

奖金问题：与更传统的控制器定义相比，使用这样的组件时应该注意哪些特性？我是 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 循环（angular.js 更新 html 中所有值的东西）对异步调用没有反应，所以你可以尝试使用此代码

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

Answer 2

问题是你没有在控制器定义数组

中使用$scope服务

angular.
  module('patientInfo').
  component('patientInfo', {
    templateUrl: 'patient-info/patient-info.template.html',
    controller: ['$http', '$routeParams', '$scope', //This was missing
      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;

          //Now you can write

          $scope.first_name = "anything"

        });
      }
    ]
  });

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

Why can't I set input values when ng-model is used?

javascript

html

angularjs

angularjs-scope