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文件中的元素填充所有这些字段（name，dob）。我的问题很可能是双重的：

当我写$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数据的正确方法是什么？

奖金问题：使用像这样的组件而不是更传统的控制器定义时，应该注意哪些特性？我对网络开发比较陌生，并且发现自己被完成同样事情的方法所淹没。

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

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

Answer 1

在评论中回答了第一个问题，让我们转到第二个问题。

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

Object.assign

＆＃13;

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

＆＃13;

然后，在收到请求后，您将能够在该字段中看到数据。但有时$ digest循环（更新html中所有值的angular.js事物）不会对异步调用做出反应，因此您可以尝试使用此代码

＆＃13;

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

＆＃13;

在最后一个片段中，我添加了来自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时设置输入值？

2 个答案: