AngularJS表格控制器未渲染问题求助：提交姓名无法添加至表格

问题根源 #

• 方法作用域不匹配：表单位于myCtrl作用域内，ng-submit="addRow()"会尝试调用myCtrl中的addRow方法，但你将该方法定义在子控制器tableCtrl中，父作用域无法访问。
• 初始化代码错误：控制器初始化时直接访问myForm.fname.value，此时DOM尚未渲染完成，myForm对象还不存在，会引发错误导致后续逻辑异常。
• 作用域变量继承问题：子控制器tableCtrl直接使用$scope.firstName会创建自身作用域的独立变量，无法同步父作用域myCtrl中输入框的最新值。

修复后的代码 #

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.min.js"
    integrity="sha512-KZmyTq3PLx9EZl0RHShHQuXtrvdJ+m35tuOiwlcZfs/rE7NZv29ygNA8SFCkMXTnYZQK2OX0Gm2qKGfvWEtRXA=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>

<body>
  <div ng-app="myApp" ng-controller="myCtrl">
    <form name="myForm" ng-submit="addRow()">
      First Name: <input type="text" name="fname" ng-model="user.firstName"><br>
      Last Name: <input type="text" name="lname" ng-model="user.lastName"><br>
      <input type="submit" value="Submit"><br>
    </form>
    <p> Full Name: {{fullName()}}</p>
    <div ng-controller="tableCtrl">
      <table>
        <tr>
          <th>First Name</th>
          <th>Last Name</th>
        </tr>
        <tr ng-repeat="x in records">
          <td>{{x.firstName}}</td>
          <td>{{x.lastName}}</td>
        </tr>
      </table>
    </div>
  </div>
  <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function ($scope) {
      // 用对象绑定输入框，避免作用域继承冲突
      $scope.user = {
        firstName: '',
        lastName: ''
      };
      $scope.fullName = function () {
        return $scope.user.firstName + " " + $scope.user.lastName;
      };
    });
    app.controller('tableCtrl', ['$scope', function ($scope) {
      $scope.records = [];
      // 通过原型继承访问父作用域的user对象
      $scope.addRow = function () {
        $scope.records.push({
          'firstName': $scope.user.firstName,
          'lastName': $scope.user.lastName
        });
        // 提交后清空输入框（可选）
        $scope.user.firstName = '';
        $scope.user.lastName = '';
      };
    }]);
  </script>
</body>

</html>

关键修改说明 #

1. 使用$scope.user对象绑定输入框，避免子作用域创建独立变量，确保父子作用域共享同一数据源。
2. 保留addRow在tableCtrl中，借助AngularJS的原型继承特性，子控制器可直接访问父作用域的user对象。
3. 移除初始化时直接操作DOM的代码，改用空对象初始化，避免DOM未加载导致的错误。
4. 增加提交后清空输入框的逻辑，优化用户体验。

内容的提问来源于stack exchange，提问作者Muhammad Anas