我试图让这个子父组件关系起作用，但我得到了消息：
错误：[$ injector：modulerr]无法实例化模块课程 to：错误：[$ injector：modulerr]无法实例化模块 lesson.lesson-attendance由于：错误：[$ injector：modulerr]失败 实例化模块lesson.replacement-new由于：TypeError：不能 阅读财产＆＃39; controller＆＃39;未定义的 在$ CompileProvider.registerComponent [作为组件]
这是我的代码。
lesson-attendance.module.js（父模块）：
import angular from 'angular';
import uiRouter from 'angular-ui-router';
import { LessonAttendanceComponent } from './lesson-attendance.component';
//modules
import { ReplacementNewModule} from './replacement-new/replacement-new.module'
export const LessonAttendanceModule = angular
.module('lesson.lesson-attendance', [uiRouter,
ReplacementNewModule
])
.component('lessonAttendance', LessonAttendanceComponent)
.config(($stateProvider) => {
'ngInject';
$stateProvider.state('LESSON', {
url: '/tunnit/:id',
template: '<lesson-attendance></lesson-attendance>'
})
})
.name;
lesson-attendance.component.js（父组件）：
export const LessonAttendanceComponent = {
templeteUrl: 'app/lesson/lesson-attendance/lesson-attendance.html',
controller: class LessonAttendanceCtrl{
constructor($stateParams, $q, LessonApi, CourseApi, $location, DateService, ModalService, AuthStatus, StudentService, $uibModal) {
'ngInject';
this.params = $stateParams;
this.q = $q;
this.lessonApi = LessonApi;
this.courseApi = CourseApi;
this.location = $location;
this.dates = DateService;
this.modals = ModalService;
this.status = AuthStatus;
this.studentSvc = StudentService;
this.lessonAttendance = [];
this.students = [];
this.lesson = {};
this.course = {};
this.creatingNew = false;
}
$onInit() {
this.lesonApi.getLesson(this.params.id)
.then(res => {
this.lesson = res.data;
this.date_time = this.dates.parseDateTime(res.data._time, res.data._date);
return this.courseApi.getCourse(this.lesson.course);
})
.then(res => {
this.course = res.data;
return this.courseAPi.getStudentsByCourse(this.lesson.course)
})
.then(res => {
this.students = res.data;
return getLessonAttendances();
})
.then(res => getReplacements());
}
changeLocation() {
if(this.status.getRole() == "teacher") this.location.path("/opettajat/"+this.status.roleObj.id+"/profiili");
else this.location.path("/ryhmat/" + this.lesson.course);
}
initLessonAttendances() {
for(let i in this.students){
this.lessonAttendance.push({
student: this.students[i].id,
status: 'ei merkitty',
lesson: this.params.id,
firstname: this.students[i].firstname,
lastname: this.students[i].lastname,
});
}
}
getLessonAttendances() {
this.lessonApi.getLessonAttendances($stateParams.id)
.then(res => {
this.lessonAttendance = res.data;
if(this.lessonAttendance.length<=0){
this.creatingNew=true;
initLessonAttendances();
}
});
}
getReplacements(){
this.lessonApi.getReplacementsByLesson(this.params.id)
.then(res => this.replacements = res.data);
}
addLessonAttendances(data) {
this.lessonApi.addLessonAttendances(data)
.then(() => changeLocation());
}
updateLessonAttendances(data) {
this.lessonApi.updateLessonAttendances(data)
.then(() => changeLocation());
}
openAddReplacement() {
$uibModal.open({
component: 'replacementNew',
resolve: {
missed_lesson: () => billId
}
}).result.then(
result => this.getContent(),
reason => console.log(reason)
);
}
saveLessonAttendances() {
let a,b,c;
if(this.creatingNew){
a = addLessonAttendances(this.lessonAttendance);
}else{
a = updateLessonAttendances(this.lessonAttendance);
}
b = this.lessonApi.updateLessonReplacements(this.replacements);
c = this.lessonApi.updateLesson(this.lesson);
return $q.all([a, b, c]);
};
deleteLesson() {
const modalOptions = {
closeButtonText: 'Peruuta',
actionButtonText: 'Poista ',
headerText: 'Poistetaan tunti',
bodyText: 'Oletko varma että haluat poistaa tunnin ryhmältä?'
};
return ModalService.showModal({}, modalOptions)
.then(() => this.lessonApi.deleteLesson(this.params.id))
.then(() => this.location.path('/ryhmat/' + this.course.id));
}
changeStatus(att) {
if(att.status == 'poissa')att.status = 'paikalla';
else if(att.status == 'paikalla')att.status = 'poissa';
else if(att.status == 'ei merkitty')att.status = 'paikalla';
}
openLessonEdit() {
this.modals.openModal('app/lesson/views/partials/lessonEditModal.html', {lesson: this.lesson})
.then(() => this.$onInit());
}
}
}
lesson-attendance.html（父视图）：
<div id="lesson-attendance">
<div class="centered-page" id="main-container">
<h1>{{course.name}} ({{lesson._date | date : 'dd.MM.yyyy'}})</h1>
<!--Modal buttons-->
<div class="search-bar" permission permission-only="['ADMIN']">
<div class="row">
<div class="col-md-12">
<button permission permission-only="['ADMIN']" id="openLessonEdit" class="btn btn-success" ng-click="openLessonEdit()">Muokkaa tunnin tietoja</button>
<button permission permission-only="['ADMIN']" id="deleteLesson" class="btn btn-danger" ng-click="deleteLesson()">Poista tunti</button>
</div>
</div>
</div></br>
<!--Normal students-->
<div class="panel panel-area">
<h3 class="centered">Oppilaat</h3>
<div class="list" ng-repeat="attendance in lessonAttendance | orderBy:'lastname'">
<div class="list-item">
<div class="flexbox">
<div class="col"> <h4 style="width:100%;">{{attendance.firstname}} {{attendance.lastname}}</h4> </div>
<div ng-click="changeStatus(attendance)" class="col">
<button style="width:100%; height:100%;" ng-class="{'btn-default': attendance.status == 'ei merkitty', 'btn-success': attendance.status == 'paikalla', 'btn-danger': attendance.status == 'poissa', 'btn-warning': attendance.status == 'korvannut'}" class="btn">
{{attendance.status}}
</button>
</div>
</div>
</div>
</div>
</div></br>
<!--Replacement students-->
<div ng-show="replacements.length > 0">
<div class="panel panel-area">
<div class="flexbox">
<h3 class="centered">Korvaajat</h3>
<button class="btn btn-primary" ng-click="openReplacementModal()">Lisää korvaaja</button>
</div>
<div class="list" ng-repeat="replacement in replacements track by $index">
<div class="list-item">
<div class="flexbox">
<div class="col"> <h4 style="width:100%;">{{replacement.firstname}} {{replacement.lastname}}</h4> </div>
<div ng-click="changeStatus(replacement)" class="col-md-6 col-xs-6">
<button style="width:100%; height:100%;" ng-class="{'btn-default': attendance.status == 'ei merkitty', 'btn-success': replacement.status == 'paikalla', 'btn-danger': replacement.status == 'poissa'}" class="btn">
{{replacement.status}}
</button>
</div>
</div>
</div>
</div>
</div>
</div><br>
<div class="panel panel-area">
<h3 class="centered">Julkiset muistiinpanot</h3>
<textarea style="width: 100%; height:10em; max-width: initial;" ng-model="lesson.public_note"></textarea>
</div>
</br>
<div class="panel panel-area">
<h3 class="centered">Omat muistiinpanot</h3>
<textarea style="width: 100%;height:10em; max-width: initial;" ng-model="lesson.private_note"></textarea>
</div>
<div class="btn-group">
<button id="addLessonAttendance" class="btn btn-success" ng-click="saveLessonAttendances()">Tallenna</button>
<a id="returnButton" href="#/ryhmat/{{course.id}}" class="btn btn-primary" role="button">Palaa ryhmään</a>
</div>
</div>
</div>
replacement-new.module.js（子模块）：
import { ReplacementNewComponent } from './replacement-new.component';
export const ReplacementNewModule = angular
.module('lesson.replacement-new', [])
.component('replacementNew', ReplacementNewComponent)
.name;
replacement-new.component.js（子组件）：
export const ReplacementNewComponet = {
bindings: {
resolve: '<',
modalInstance: '<'
},
templateUrl: 'app/lesson/lesson-attendance/replacement-new/replacement-new.html',
controller: class ReplacementNewCtrl {
constructor(LessonApi) {
'ngInject';
this.lessonApi = LesonApi;
this.replacement = {};
}
$onInit() {
this.studentApi.getStudentsAbsentByLesson({
lesson: this.resolve.missed_lesson
})
.then(res => {
this.missedStudents = formatDates(res.data);
})
}
createReplacement(student) {
this.lessonApi.addLessonReplacement({
missed_lesson: null,
replacement_lesson: resolve.lesson,
student: student,
status: 'paikalla'
})
.then(() => this.modalInstance.ok());
}
}
}
replacement-new.html（子视图）：
<div>
<h4>Valitse korvaaja</h4>
<div class="list" ng-reapeat="students in $ctrl.missedLessons">
<div role="btn" bg-click="$ctrl.createReplacement()" class="list-item">{{Lastname}} {{Firstname}}</div>
</div>
</div>
我在我的整个应用程序中使用了类似的组件架构现在似乎是我想念的东西。
提前致谢！