Encapsulating Modell in seiner eigenen Klasse für Angularjs App

Question

Ich habe 2 Ansichten. Eine besteht darin, den Schüler in einer Tabelle aufzuführen, und die andere ist, wenn Sie auf einen Schüler klicken, werden die Details des Schülers angezeigt. Ich habe den Schüler zu seiner eigenen Klasse in einer separaten Datei student.js gebracht. Die Sache ist, Studentendetails werden in der Ansicht nicht ausgefüllt.

Ich werde den Controller und die Ansicht für Student Details zusammen mit der Schülerklasse präsentieren.

Studenten Prototyp als Fabrik in 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; 
}]); 

Jetzt benutze ich den Studenten Prototyp oben im studentDetailsCtrl:

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

Hier loadStudent() nimmt die ID des aktuellen Schüler aus der URL und Legen Sie die Schülerattribute fest.

Schüler Detailansicht:

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

Was mache ich falsch? Schätze jede Hilfe!

Answer 1

<form name="student"> 

Erstellt Scope-Formularvariable "Student" und überschreiben Sie Ihr Studentenmodell.