为 Angularjs 应用程序在自己的 class 中封装模型

Question

我有2个观点。一个是在 table 中列出学生，另一个是当你点击一个学生时，它会显示学生的详细信息。我已将学生带到它自己的 class 单独的文件 student.js 中。问题是，视图中不会填充学生详细信息。

我将与学生一起展示控制器和学生详细信息视图 class。

学生原型作为 student.js 中的工厂：

// 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 原型

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

此处loadStudent()从url中获取当前学生的id并设置学生属性

学生详细信息视图：

<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"并重写您的学生模型。

为 Angularjs 应用程序在自己的 class 中封装模型

Encapsulating model in its own class for Angularjs app

javascript

javascript-objects

angularjs

angularjs-scope

angularjs-http