javascript - 尝试调用休息函数时，Angular dataService.init 不是函数-6ren

javascript - 尝试调用休息函数时，Angular dataService.init 不是函数

转载作者：行者123 更新时间：2023-12-03 04:27:56

目前我正在学习 AngularJS。我通过做测验应用程序教程来练习它。我陷入困境，因为在我将我的工厂之一注入(inject)我的 Controller 之一之后......我无法调用工厂的休息功能......我的 JSON 数据来自 Spring 后端。

结果.js:

(function(){

    angular
        .module("quizApp")
        .controller("resultsController", resultsController);

    resultsController.$inject = ['quizMetrics', 'dataService'];

    function resultsController(quizMetrics, dataService) {
        var vm = this;

        vm.quizMetrics = quizMetrics;
        vm.dataService = dataService;
        vm.activeQuestion = 0;
        vm.reset = reset;
        vm.getAnswerClass = getAnswerClass;
        vm.setActiveQuestion = setActiveQuestion;
        vm.calculatePerc = calculatePerc;

        function getAnswerClass(index) {
            if(index === quizMetrics.correctAnswers[vm.activeQuestion]) {
                return "bg-success";
            } else if (index === dataService.quizQuestions[vm.activeQuestion].selected){
                return "bg-danger";
            }
        }

        function setActiveQuestion(index){
            vm.activeQuestion = index;
        }

        function calculatePerc() {
            return quizMetrics.numCorrect / dataService.quizQuestions.length * 100;
        }

        function reset() {
            dataService.init();
            quizMetrics.changeState("results", false);
            quizMetrics.numCorrect = 0;

            for(var i = 0; i < dataService.quizQuestions.length; i++) {
                var data = dataService.quizQuestions[i];

                data.selected = null;
                data.correct = null;
            }
        }

    }

})();

dataService.js:

(function() {

    angular
        .module("quizApp")
        .factory("dataService", DataFactory);

    function DataFactory($http) {
        var vm = this;
        vm.init = init;
        vm.getAllQ = getAllQ;

        init();

        function init(){
            getAllQ();
        }

        var dataObj = {
            quizData: quizData,
            quizQuestions: [],
            correctAnswers: []
        };

        function getAllQ(){
            var url = "/tenQuestion";
            var questionsPromise = $http.get(url);
            questionsPromise.then(function(response){
                dataObj.quizQuestions = response.data;

                for(var i = 0; i < dataObj.quizQuestions.length; i++) {
                    /*console.log("[LOG]: "+ i +". quizQuestions.solution: " + dataObj.quizQuestions[i].solution);
                    console.log("[LOG]: "+ i +". quizQuestions.solution: " + response.data[i].solution);*/
                    dataObj.correctAnswers.push(response.data[i].solution);
                }

            });
        }

        return dataObj;
    }
})();

游戏.html:

<!DOCTYPE html>
<html ng-app="quizApp">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>GAME Page - KRESZ QUIZ</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>



<body>
<div class="container">

    <div class="page-header">
        <form th:action="@{/questions}" method="get">
            <button class="btn btn-md btn-warning btn-block" type="Submit">Go Question Page</button>
        </form>

        <form th:action="@{/answers}" method="get">
            <button class="btn btn-md btn-warning btn-block" type="Submit">Go Answer Page</button>
        </form>


        <h1>KRESZ Quiz</h1>
        <h3>
            KRESZ tanulást segítő <strong>quiz</strong> alkalmazás
        </h3>
    </div>

    <div ng-controller="listController as list" ng-hide="list.quizMetrics.quizActive || list.quizMetrics.resultsActive">
        <form class="form-inline well well-sm clearfix"  >
            <span class="glyphicon glyphicon-search"></span>
            <input
                    type="text"
                    placeholder="Keres..."
                    class="form-control"
                    ng-model="list.search">


            <button class="btn btn-warning pull-right" ng-click="list.activateQuiz()">
                <strong>Start Quiz</strong>
            </button>

            <a class="btn btn-danger pull-right" method="get" th:href="@{/logout}">
                <strong>Logout</strong>
            </a>
        </form>
        <div class="row">
            <div class="col-sm-6" ng-repeat="element in list.data | filter: list.search">
                <div class= "well well-sm">
                    <div class= "row">
                        <div class="col-md-6">
                            <img ng-src="{{element.image_url}}" class= "img-rounded img-responsive well-image">
                        </div>
                        <div class="col-md-6">
                            <h4>{{element.type}}</h4>
                            <p><strong>Locations:</strong>{{element.type}}</p>
                            <p><strong>Locations:</strong>{{element.size}}</p>
                            <p><strong>Locations:</strong>{{element.locations}}</p>
                            <p><strong>Locations:</strong>{{element.lifespan}}</p>
                            <p><strong>Locations:</strong>{{element.diet}}</p>

                            <button class="btn btn-primary pull-right"
                                    data-toggle="modal"
                                    data-target="#quiz-info"
                                    ng-click="list.changeActiveQuiz(element); list.dataService.getAllQ()"
                            >START</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal" id="quiz-info">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h2>{{list.activeInfobox.type}}</h2>
                    </div>
                    <div class="modal-body">
                        <div class ="row">
                            <div class="col-xs-8 col-xs-offset-2">
                                <img ng-src="{{list.activeInfobox.image_url}}" class="img-rounded img-responsive">
                            </div>
                        </div>
                        <div class="row top-buffer" >
                            <div class="col-md-6">
                                <p><strong>Locations:</strong>{{list.activeInfobox.locations}}</p>
                                <p><strong>Locations:</strong>{{list.activeInfobox.type}}</p>
                                <p><strong>Locations:</strong>{{list.activeInfobox.size}}</p>
                                <p><strong>Locations:</strong>{{list.activeInfobox.locations}}</p>
                                <p><strong>Locations:</strong>{{list.activeInfobox.lifespan}}</p>
                                <p><strong>Locations:</strong>{{list.activeInfobox.diet}}</p>
                            </div>
                            <div class ="col-xs-12 top-buffer">
                                <p>{{list.activeInfobox.description}}</p>
                                <button class="btn btn-danger pull-right" data-dismiss="modal">Bezár</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div ng-controller="quizController as quiz" ng-show="quiz.quizMetrics.quizActive">
        <div class="row">
            <div class="col-xs-8">
                <h4>Progress:</h4>
                <div class="btn-toolbar">
                    <button class="btn"
                            ng-repeat="question in quiz.dataService.quizQuestions"
                            ng-class="{'btn-info': question.selected !== null, 'btn-danger':question.selected === null}"
                            ng-click="quiz.setActiveQuestion($index)">
                            <span class = "glyphicon"
                                ng-class="{'glyphicon-pencil': question.selected !== null, 'glyphicon-question-sign': question.selected === null}"
                            ></span>
                    </button>
                </div>
            </div>
            <div class="col-xs-4">
                <div class="row">
                    <h4>Legend:</h4>
                    <div class="col-sm-4">
                        <button class="btn btn-info">
                            <span class="glyphicon glyphicon-pencil"></span>
                        </button>
                        <p>Answered</p>
                    </div>
                    <div class="col-sm-4">
                        <button class="btn btn-danger">
                            <span class="glyphicon glyphicon-question-sign"></span>
                        </button>
                        <p>Unanswered</p>
                    </div>
                </div>
            </div>
        </div><!--progress area-->

        <div class="row">
            <div class="alert alert-danger" ng-show="quiz.error">
                Hiba! Nem válaszoltál az összes kérdésre!
                <button class="close" ng-click="quiz.error = false">&times</button>
            </div>

            <h3>Question:</h3>
            <div class="well well-sm" ng-hide="quiz.finalise">
                <div class="row">
                    <div class="col-xs-12">
                        <h4>
                            {{quiz.activeQuestion+1 + ". " + quiz.dataService.quizQuestions[quiz.activeQuestion].text }}
                        </h4>
                                <div class="row" ng-if="quiz.dataService.quizQuestions[quiz.activeQuestion].type ==='text' ">
                                    <div class="col-sm-6" ng-repeat="answer in quiz.dataService.quizQuestions[quiz.activeQuestion].possibilities">
                                        <h4 class="answer" ng-class="{'bg-info': $index === quiz.dataService.quizQuestions[quiz.activeQuestion].selected}"
                                        ng-click="quiz.selectAnswer($index)">
                                            {{answer.answer}}
                                        </h4>
                                    </div>
                                </div>

                                <div class="row" ng-if="quiz.dataService.quizQuestions[quiz.activeQuestion].type ==='image' ">
                                    <div class="col-sm-6" ng-repeat="answer in quiz.dataService.quizQuestions[quiz.activeQuestion].possibilities">
                                        <div class="image-answer"
                                        ng-class="{'image-selected': $index === quiz.dataService.quizQuestions[quiz.activeQuestion].selected}"
                                        ng-click="quiz.selectAnswer($index)">
                                            <img ng-src="{{answer.answer}}">
                                        </div>
                                    </div>
                                </div>
                    </div>
            </div>
                <button class="btn btn-warning" ng-click="quiz.questionAnswered()">Tovább</button>
                <a class="btn btn-danger pull-right" method="get" th:href="@{/logout}">
                    <strong>Logout</strong>
                </a>
                </div>

            <div class="well well-sm" ng-show="quiz.finalise">
                <div class="row">
                    <div class="col-xs-12">
                        <h3>Biztos el akarod küldeni a válaszaidat?</h3>
                        <button class="btn btn-success" ng-click="quiz.finaliseAnswers()">Igen</button>
                        <button class="btn btn-danger"  ng-click="quiz.finalise = false">Nem</button>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <div ng-controller="resultsController as results" ng-show="results.quizMetrics.resultsActive">
      <div class="row">
          <div class="col-xs-8">
              <h2>Results:</h2>
              <div class="btn-toolbar">
                  <button class="btn"
                          ng-repeat="question in results.dataService.quizQuestions"
                          ng-class="{'btn-success': question.correct, 'btn-danger': !question.correct}"
                          ng-click="results.setActiveQuestion($index)">
                            <span class="glyphicon" ng-class="{'glyphicon-ok': question.correct, 'glyphicon-remove': !question.correct}"></span>
                  </button>
              </div>
          </div>
          <div class="col-xs-4">
              <div class="row">
                  <h4>Legend:</h4>
                  <div class="col-sm-4">
                      <button class="btn btn-success">
                          <span class="glyphicon glyphicon-ok"></span>
                      </button>
                      <p>Answered</p>
                  </div>
                  <div class="col-sm-4">
                      <button class="btn btn-danger">
                          <span class="glyphicon glyphicon-remove"></span>
                      </button>
                      <p>Unanswered</p>
                  </div>
              </div>
          </div>
      </div>

        <div class="row">
            <div class="col-xs-12 top-buffer">
                <h2>Score: {{results.quizMetrics.numCorrect}} / {{results.dataService.quizQuestions.length}}</h2>
                <h2><strong>{{results.calculatePerc() | number:2}}%</strong></h2>
            </div>
        </div>

        <div class="row">
            <h3>Questions:</h3>
            <div class="well well-sm">
                <div class="row">
                    <div class="col-xs-12">
                        <h4>{{ results.activeQuestion+1 + ". " + results.dataService.quizQuestions[results.activeQuestion].text }}</h4>

                        <div class="row" ng-if="results.dataService.quizQuestions[results.activeQuestion].type === 'text'">
                            <div class="col-sm-6" ng-repeat="answer in results.dataService.quizQuestions[results.activeQuestion].possibilities">
                                <h4 class="answer"
                                ng-class="results.getAnswerClass($index)">
                                    {{answer.answer}}
                                    <p class="pull-right" ng-show="$index !== results.quizMetrics.correctAnswers[results.activeQuestion] && $index === results.dataService.quizQuestions[results.activeQuestion].selected">Válaszod</p>
                                    <p class="pull-right" ng-show="$index === results.quizMetrics.correctAnswers[results.activeQuestion]">Helyes válasz</p>
                                </h4>
                            </div>
                        </div>

                        <div class="row" ng-if="results.dataService.quizQuestions[results.activeQuestion].type === 'image'">
                            <div class="col-sm-6" ng-repeat="answer in results.dataService.quizQuestions[results.activeQuestion].possibilities">
                                <div class="image-answer"
                                     ng-class="results.getAnswerClass($index)">
                                    <image ng-src="{{answer.answer}}"/>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div><!--well-->

            <button class="btn btn-primary btn-lg" ng-click="results.reset()">Vissza</button>
        </div>

    </div>

</div>


<!--thid party js-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.2/angular.js"></script>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.2/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.js"></script>


<!--our app js-->
<script src="./js/app.js"></script>
<script src="./js/controller/list.js"></script>
<script src="./js/controller/quiz.js"></script>
<script src="./js/factory/quizMetrics.js"></script>
<script src="./js/controller/results.js"></script>
<script src="./js/factory/dataService.js"></script>


</body>
</html>




Error: dataService.init is not a function
reset@http://localhost:8080/js/controller/results.js:40:13
fn@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.2/angular.js line 14157 > Function:2:267
expensiveCheckFn@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.2/angular.js:15146:18
callback@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.2/angular.js:24614:17
$eval@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.2/angular.js:16888:16
$apply@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.2/angular.js:16988:20
ngEventHandler/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.2/angular.js:24619:17
defaultHandlerWrapper@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.2/angular.js:3394:3
eventHandler@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.2/angular.js:3382:9

如果我使用 getAllQ 方法而不是 init 方法，我仍然会收到此错误 getAllQ 不是一个函数，但是像这样声明的其他函数正在工作。

感谢您的提前

最佳答案

我认为问题在于函数init没有在 Angular factory中定义。 DataFactory 函数返回一个对象 dataObj，这些属性成为 Controller 中使用的工厂中的公开属性。为了能够在 Controller 中使用init，您需要修改dataObj，使其:

var dataObj = {
    init: init,
    quizData: quizData,
    quizQuestions: [],
    correctAnswers: []
};

希望有帮助。

关于 AngularJS 中的工厂与服务的一些额外阅读:

https://blog.thoughtram.io/angular/2015/07/07/service-vs-factory-once-and-for-all.html

关于javascript - 尝试调用休息函数时，Angular dataService.init 不是函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43618750/

文章推荐： javascript - Mongoose:如何更新/保存文档？

文章推荐： javascript - 如何使用用户信息渲染表单(React + Redux)

休息 - 关系上下文
假设我有两个集合资源: /persons /organizations 一个 GET至 /persons/id/返回一个特定的人。同样，一个 GET至 /organizations/id返回一个特定的
休息。不存在资源的子资源
这个问题在这里已经有了答案: Rest best practice: when to return 404 not found (1 个回答) 关闭 7 年前。我有以下 API: api/gues
Django 休息 update_or_create
背景: 我正在尝试创建一个系统，允许用户对其他用户撰写的评论进行投票(类似于 Reddit)。用户可以选择三个投票值:-1、0 或 1。我创建了一个 POST API(使用 django Rest-f
java - 休息通话不工作
我正在尝试使用休息调用，该调用获取操作系统中文件的位置。作为返回，其余调用模拟文件的下载。下面是代码 Welcome to CoinPay Click on bel
java - 接收客户端上传的文件，休息
我正在向后端发送一个文件，这是上传代码: export class FileUploadComponent { @Input() multiple: boolean = false; @Vie
java - 休息;线路不可达
字符串用户年龄； while(true){ System.out.println("Enter user Age"); userAge = scInput.ne
c++ - 休息;导致段错误
我正在使用堆栈进行括号检查。包含 break; 语句的 if else 语句之一导致段错误。我尝试删除 break 程序运行正常但打印错误答案，因为需要 break 才能打印正确的输出。这种段错误的
c - 休息;未选择正确选项时出现问题。
我是新手，正在学习编程，但无法正确“中断”它。如果硬币不是 0、5、10 或 25，它应该“打破”(最后一个 if)。该程序应该像自动售货机一样工作，只使用 10 美分、5 分硬币、25 美分硬币，当
php - 对于每个...休息
每次“打破”for-each 结构(PHP/Javascript)时，我都觉得很脏所以像这样: //Javascript 示例 for (object in objectList) { if
typescript - 休息/传播参数类型
对于这段代码: type Callback = (err: Error | null, result: String) => void; let apiThatAcceptsCallback = (c
api - TeamCity 休息 API
如何获取 teamcity build 的变化？我得到以下 URL，其中列出了所有构建更改并提供了一个 URL，我们可以使用该 URL 查看更改 http://teamcityserver/httpA
api - 富文本的最佳实践。休息。后端
社区我正在寻找有关富文本的一些建议。目前的问题是:在后端(在数据库中)存储和管理富文本内容的最佳方式是什么。为什么这看起来像个问题，因为我们可以有多个平台:桌面、移动、网络，这会带来问题。据我所知
javascript - 如何从spring获取参数响应？ (休息 Javascript)
我在向 html 返回错误时遇到问题。所以，我有带有“sql解释器”的网络应用程序。 HTML 在解释器中输入查询后，我在 javascript 中运行 POST 并拍摄到 sprin
java - 休息 Controller 单元测试
我正在尝试为 Rest Controller 进行单元测试。我为经理对数据库访问做了一个 stub (~mock)，它运行良好。我唯一的问题是，当我开始单元测试时，它不会启动应用程序。如何从我的单元
Azure 休息 API。如何创建文件夹并检查文件夹是否存在？
我想使用 azure blob Rest api 创建文件夹，并且还想检查文件夹是否存在。 Hierarchy: arjun/images/ arjun/Videos/001.avi arjun/Vi
django 休息 Angular 登录
我正在寻找使用 django Rest 和 Angular 处理用户登录的最佳方法。目前我正在 Controller 中执行此操作， $http.post('accounts/login/', $sc
image - 休息 api 设计和工作流程上传图像。
我想设计一个允许客户端上传图像的 API，然后应用程序创建图像的不同变体，例如调整大小或更改图像格式，最后应用程序将每个变体的图像信息存储在数据库中。当我尝试确定实现此任务的正确策略时出现问题，这里有
javascript - Angular 休息 web2py
我无法使用 Angular Ajax 连接我的服务器 web2py Restful，但如果我在浏览器中设置 url，它就可以工作，但我不能在 Angular ajax =( Angular 链接
Python flask 休息 api
我想在我的项目中添加一个 rest api，因此我需要一个选择性的 mysql 语句 bt 我总是回来 { “错误”:“(1054，你\“'where子句'中的未知列'无'\”)” 代码有什么问题？我
c# - 如何通过Azure管理API打开/关闭Azure虚拟机(休息)
我想为自己创建一个启动/停止 Azure VM 机器人。我想做的是拥有一个 slack/telegram 机器人，它可以监听消息并通过命令/start/stop 启动/停止我的虚拟机。我应该使用什么

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 尝试调用休息函数时，Angular dataService.init 不是函数