javascript - 将模型封装在 Angularjs 应用程序自己的类中

Question

我有两个观点。一种是在表格中列出学生，另一种是当您单击学生时，它会显示学生的详细信息。我在单独的文件 student.js 中将学生带到了自己的类(class)。问题是，学生详细信息不会填充到 View 中。

我将与学生类(class)一起展示学生详细信息的 Controller 和 View 。

在 student.js 中作为工厂的学生原型(prototype):

// idea: You can initialize a student like new Student(student) 
//where student is a json else new Student() will return a student with 
//attributes set to null.

app.factory('Student', ['$http', function($http) {
  function Student(student) {
    if (student) {
        this.setStudent(student);
    } else {
        this.setStudent({
            id: null,
            name: null,
            level: null,
            schoolName: null,
            phoneNumber: null,
            email: null
        });
    }
  };
  Student.prototype = {
    setStudent: function(student) {
        angular.extend(this, student);
    },
    loadStudent: function(studentId) {
        var scope = this;
        $http.get('myUrl/' + studentId).then(function(response){
            scope.setStudent(response.data);
        });
    }
  };
  return Student;
}]);

现在我在 studentDetailsCtrl 中使用上面的 Student 原型(prototype):

app.controller('studentDetailsCtrl', ['$scope', '$stateParams', 'Student', function($scope, $stateParams, Student) {
  $scope.student = new Student();
  $scope.student.loadStudent($stateParams.studentId);
}]);

这里 loadStudent() 从 url 中获取当前学生的 id 并设置学生属性。

学生详情 View :

<div ng-controller="studentDetailsCtrl">
<div class="wrapper-md bg-light b-b">
    <h1 class="m-n font-thin h3">Student Details</h1>
</div>
<div class="hbox hbox-auto-xs hbox-auto-sm">
    <div class="col wrapper-md">
        <form name="student" class="form-horizontal">
            <div class="form-group">
                <label class="control-label col-sm-2">Name: </label>
                <div class="controls col-sm-5">
                    <p class="form-control-static">{{ student.name }}</p>
                </div>
            </div>
            </div>
        </form>
    </div>
</div>

我做错了什么？感谢任何帮助!

Answer 1

<form name="student">

创建作用域表单变量“student”并重写您的学生模型。