Question

我想创建动态控制器，负责查看来自REST API的数据。我的想法是将ng-repeat指令与来自服务的数据一起使用，并在其内部使用ng-controller指令创建对象，其中参数来自ng-repeat输出（最重要的条件是每个问题必须有自己的$ scope）。不幸的是，我不知道如何从服务中传递数据。

AngularJS服务代码

(function () {
    'use strict';
    angular
        .module('App')
        .factory('questionsDataService', questionsDataService);

    questionsDataService.$inject = ['$http'];

    function questionsDataService($http) {
        return {
            getMetadata: function (taskId) {
                var metaData = $http.get('api/toDo/taskVariables/' + taskId).then(
                    function (response) {
                        return response.data;
                    });
                return metaData;
            },

            getQuestionsData: function (taskId) {
                var questionsData = $http.get('api/toDo/getQuestions/' + taskId).then(
                    function (response) {
                        return response.data;
                    });
                return questionsData;
            }
        }
    }
})();

Answer 1

我不确定我是否理解了这个问题，你的标题是误导性的，但我将展示如何从服务中获取数据。我不认为你需要为ng-repeat中的每个项目设置一个新的控制器，但是没有更多关于你为什么要这样做的信息，我无法帮助那里。

(function () {
    'use strict';
    angular
        .module('App')
        .controller('myController', myController);

    // you are injecting your service here, this will be whatever the string is from the .factory() call
    myController.$inject = ['$scope', 'questionsDataService'];


    // again, we are passing the service in to the controller function
    function myController($scope, questionsDataService) {

        // your service calls are returning promises
        // this will get run when the controller is initialized
        questionsDataService.getMetadata(1).then(function(data){
            // here is where you can access the returned metadata
            // save it to the scope so you can access it in the DOM
            console.log(data);
        })

        // if you want to call your service on a button click, or with some other function
        $scope.getQuestions = function (id) {
            questionsDataService.getQuestionsData(id).then(function (data) {
                // here is where you can access the returned data
                // save it to the scope so you can access it in the DOM
                console.log(data);
            })
        }

        // I added a service method that returns a string, rather than a promise
        // this will get run when the controller is initialized
        var str = questionsDataService.getServiceName();
        console.log(str);

    }
})();

(function () {
    'use strict';
    angular
        .module('App')
        .factory('questionsDataService', questionsDataService);

    questionsDataService.$inject = ['$http'];

    function questionsDataService($http) {
        return {
            getMetadata: function (taskId) {
                var metaData = $http.get('api/toDo/taskVariables/' + taskId).then(
                    function (response) {
                        return response.data;
                    });
                return metaData;
            },

            getQuestionsData: function (taskId) {
                var questionsData = $http.get('api/toDo/getQuestions/' + taskId).then(
                    function (response) {
                        return response.data;
                    });
                return questionsData;
            },

            // adding this just to show you how to access functions that don't return promises
            getServiceName: function () {
                return "questionsDataService";
            }
        }
    }
})();

在ng-repeat指令

1 个答案: