Question

当我加载html页面时，我的控制器从关于课程的API端点检索数据。页面将填充有关课程的数据。但与此同时，我想在页面的一部分填充有关课程讲师的数据（他们的形象，姓名，描述等......）。我使用ng-init指令将讲师名称传递给方法，但我得到了

ReferenceError：讲义未定义。

我不确定，但我相信问题是我使用ng-init指令调用getLecturer（）函数的方式。

页面加载时我想要发生的事情是页面上显示Lecturer的详细信息以及课程详细信息。

courses.html

<div class="container"  ng-controller="CoursesDetailsCtrl">

    <div class="row" >
        <div class="col-4" ng-model="getLecturer(courses.lecturer)">
           <div>
             <h3>{{lecturer.name}}</h3>
             <<div>
                 <img class="img-circle"  ng-src="{{lecturer.picture}}" alt="" /> 
             </div>
                <p>{{lecturer.description}}</p>  -->
           </div>

        </div>
        <div class="col-8"> 
            <div class="myContainer" >
                <h2>{{courses.name}}</h2>
                <div class="thumbnail">
                    <img  ng-src="{{courses.picture}}" alt="" /> 
                </div>
                <div>
                    <p>{{courses.description}}</p>
                </div> 
            </div>
        </div> 
    </div>
</div>

CoursesDetailsCtrl

todoApp.controller('CoursesDetailsCtrl', ['coursesFac','lecturerFac','$scope','$stateParams', function CoursesCtrl(coursesFac, lecturerFac, $scope, $stateParams){

$scope.getLecturer = function(name){
        lecturerFac.getLecturerByName(name)
            .then(function (response) {
                $scope.lecturer = response.data;
                console.log($scope.lecturer);
            }, function (error) {
                $scope.status = 'Unable to load lecturer data: ' + error.message;
                console.log($scope.status);
            });
    };

}]);

lecturerFac

todoApp.factory('lecturerFac', ['$http', function($http) {

var urlBase = '/api/lecturer';
    var coursesFac = {};

     lecturerFac.getLecturer = function () {
        return $http.get(urlBase);
     };

    lecturerFac.getLecturerByName = function (name) {
        return $http.get(urlBase + '/' + name);
    };

    return lecturerFac;
}]);

Answer 1

todoApp.factory('lecturerFac', ['$http', function($http) {

    var urlBase = '/api/lecturer';
        var coursesFac = {};
        var service = {};
         service.getLecturer = function () {
            return $http.get(urlBase);
         };

        service.getLecturerByName = function (name) {
            return $http.get(urlBase + '/' + name);
        };

        return service;
    }]);

Answer 2

我认为此错误的原因是lecturerFac变量未在工厂中初始化。在工厂中创建一个空对象调用lecturerFac并将其返回。

todoApp.factory('lecturerFac', ['$http', function($http) {
    var urlBase = '/api/lecturer';
    var coursesFac = {};

    var lecturerFac= {};/////////////////////

    lecturerFac.getLecturer = function() {
        return $http.get(urlBase);
    };
    lecturerFac.getLecturerByName = function(name) {
        return $http.get(urlBase + '/' + name);
    };
    return lecturerFac;
}]);

还要避免在ng-model中调用函数。当您使用ng-model绑定某些内容时，它必须可用于读取和写入 - 例如对象上的属性/字段。使用ng init代替

ReferenceError：讲义未定义讲座

2 个答案: