Question

我是AngularJS的新手，我做了一些简单的测验应用程序，上面是我的控制器，它包含了Angular使用的所有应用程序逻辑：

var myApp = angular
    .module("myModule", [])
    .controller("quizController", function ($scope, $http) {

        $scope.title = "loading question...";
        $scope.options = [];
        $scope.correctAnswer = true;

        $scope.successCallBack = function(data) {
            $scope.options = [
                {
                    name: data.answerA,
                    chosen: "A"
                },
                {
                    name: data.answerB,
                    chosen: "B"
                },
                {
                    name: data.answerC,
                    chosen: "C"
                },
                {
                    name: data.answerD,
                    chosen: "D"
                }
            ];
            $scope.questionId = data.questionId;
            $scope.title = data.title;
            $scope.correctAnswer = true;
        };


        $scope.nextQuestion = function () {

            $scope.title = "loading question...";
            $scope.options = [];

            $http.get("/api/Quiz")
                .success(function(data) {
                    $scope.successCallBack(data);
                })
                 .error(function () {
                     $scope.title = "Oops... something went wrong";
                 });
        }


        $scope.sendAnswer = function (questionId, answer) {

            $http.post("/api/Quiz", { 'questionId': questionId, 'chosenAnswer': answer }).success(function (data) {
                $scope.correctAnswer = (data === true);
                $scope.nextQuestion();
            }).error(function () {
                $scope.title = "Oops... something went wrong";
            });
        };


    });

我想要做的下一步是将一些功能转移到服务中。问题是如何做到这一点？让我们看看nextQuestion（）函数 - 我想将它移动到服务，但是这个函数修改了我将无法从服务访问的$ scope元素（标题，选项）。第二个问题是这个函数调用successCallBack（）函数。如果有人可以编写一个可以管理我的函数的服务示例代码 - nextQuestion（）和sendAnswer（），那会很棒，因为我被困在那里

更新

var myApp = angular
    .module("myModule", [])
    .controller("quizController", function ($scope, quizService) {

        $scope.title = "loading question...";
        $scope.options = [];
        $scope.correctAnswer = true;

        $scope.successCallBack = function (data) {
            $scope.options = data.options;
            $scope.questionId = data.questionId;
            $scope.title = data.title;
            $scope.correctAnswer = true;
        };


        $scope.nextQuestion = function () {

            $scope.title = "loading question...";
            $scope.options = [];

              quizService.nextQuestion().then(function(data) {
                  $scope.successCallBack(data);
                })
                 .catch(function () {
                     $scope.title = "Oops... something went wrong";
                 });
        }


        $scope.sendAnswer = function (questionId, answer) {

           quizService.sendAnswer().then(function (){
                $scope.correctAnswer = (data === true);
                $scope.nextQuestion();
            }).catch(function () {
                $scope.title = "Oops... something went wrong";
            });
        };


    });

/// <reference path="../controllers/quizController.js" />


myApp.factory("quizService", function($http, $q) {

    var self = {};

    self.nextQuestion = function () {
        var deferred = $q.defer();
        $http.get("/api/Quiz").then(function(data) {
            var options = [
                {
                    name: data.answerA,
                    chosen: "A"
                },
                {
                    name: data.answerB,
                    chosen: "B"
                },
                {
                    name: data.answerC,
                    chosen: "C"
                },
                {
                    name: data.answerD,
                    chosen: "D"
                }
            ];

            data.options = options;
            deferred.resolve(data);
        }).catch(function(err) {
            deferred.reject(err);
        });
        return deferred.promise;
    };


    self.sendAnswer = function (questionId, answer) {
        return $http.post("/api/Quiz", {
            'questionId': questionId,
            'chosenAnswer': answer
        });
    };

    return self;
});

不工作 - 开发人员工具中的控制台没有出现任何错误，我的页面中没有数据，该怎么办？

Answer 1

此服务的功能应该返回帖子或获取的承诺。它看起来像下面的代码

控制器：

$scope.sendAnswer = function(questionId, answer){
myService.sendAnswer(questionId, answer).success(function(){
//do things with scope
}).error(function(){
//same here 
});
};

服务：

service.sendAnswer = funciton(question, answer){
return %http.post("/api/Quiz", { 'questionId': questionId, 'chosenAnswer': answer });
}
return service;

我希望这是有帮助的

Answer 2

尝试这样的事情：

var myApp = angular
    .module("myModule", [])
    .controller("quizController", function ($scope, QuizService) {

        $scope.title = "loading question...";
        $scope.options = [];
        $scope.correctAnswer = true;

        $scope.nextQuestion = function () {

            $scope.title = "loading question...";
            $scope.options = [];

            QuizService.nextQuestion().then(function(data){
                $scope.options = [
                    {
                        name: data.answerA,
                        chosen: "A"
                    },
                    {
                        name: data.answerB,
                        chosen: "B"
                    },
                    {
                        name: data.answerC,
                        chosen: "C"
                    },
                    {
                        name: data.answerD,
                        chosen: "D"
                    }
                ];
                $scope.questionId = data.questionId;
                $scope.title = data.title;
                $scope.correctAnswer = true;

            }).catch(function(){
                $scope.title = "Oops... something went wrong";
            });
        };


        $scope.sendAnswer = function (questionId, answer) {
            QuizService.sendAnswer().then(function(){
                $scope.correctAnswer = (data === true);
                $scope.nextQuestion();                
            }).catch(function(){
                $scope.title = "Oops... something went wrong";
            });
        };

    });

myApp = angular.factory('QuizService', function($http){

    var self = {};

    self.nextQuestion = function(){
        return $http.get("/api/Quiz");
    };

    self.sendAnswer = function(questionId, answer){
        return $http.post("/api/Quiz", {
            'questionId': questionId,
            'chosenAnswer': answer
        });
    };

    return self;

});

我没有测试过，但应该可以使用。

更新我

如果您想将options移到服务中，您应该以这种方式进行重构：

var myApp = angular
    .module("myModule", [])
    .controller("quizController", function ($scope, QuizService) {

        $scope.title = "loading question...";
        $scope.options = [];
        $scope.correctAnswer = true;

        $scope.nextQuestion = function () {

            $scope.title = "loading question...";
            $scope.options = [];

            QuizService.nextQuestion().then(function(data){
                $scope.options = data.options; // refactored here
                $scope.questionId = data.questionId;
                $scope.title = data.title;
                $scope.correctAnswer = true;

            }).catch(function(){
                $scope.title = "Oops... something went wrong";
            });
        };


        $scope.sendAnswer = function (questionId, answer) {
            QuizService.sendAnswer().then(function(){
                $scope.correctAnswer = (data === true);
                $scope.nextQuestion();                
            }).catch(function(){
                $scope.title = "Oops... something went wrong";
            });
        };

    });

myApp = angular.factory('QuizService', function($http, $q){ // inject $q here

    var self = {};

    // the nextQuestion refactored returning a promise
    self.nextQuestion = function(){
        var deferred = $q.defer();
        $http.get("/api/Quiz").then(function(data){
            var options = [
                {
                    name: data.answerA,
                    chosen: "A"
                },
                {
                    name: data.answerB,
                    chosen: "B"
                },
                {
                    name: data.answerC,
                    chosen: "C"
                },
                {
                    name: data.answerD,
                    chosen: "D"
                }
            ];
            data.options = options;
            deferred.resolve(data);
        }).catch(function(err){
            deferred.reject(err);
        });
        return deferred.promise;
    };

    self.sendAnswer = function(questionId, answer){
        return $http.post("/api/Quiz", {
            'questionId': questionId,
            'chosenAnswer': answer
        });
    };

    return self;

});

AngularJS - 将功能从控制器移动到服务

2 个答案: