Create controllers in ng-repeat directive

Question

I'd like to create dynamically controllers responsible for view of data from REST API. My idea is to use ng-repeat directive with data from service and inside it create object with ng-controller directive with parameter from ng-repeat output (The most important condition is that each one question must have its own $scope). Unfortunatelly I don't know how to pass data from service.

AngularJS service code

(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;
            }
        }
    }
})();

You've just bumped all of your code inside this post, which makes it really difficult to read and understand. I recommend to edit this, and include only the relevant parts here to make it stand out clearly. You can bump all the required code in a fiddle and post the link in this question. — 31piy
What is that last character in your name Micha"l"? It looks like it has something going through it. I thought it was a smudge on my screen, until I scrolled and still saw it there. — Pytth
Thanks for constructive answer ;) It's letter from Polish alphabet — Michał

Tyler Tyler · Accepted Answer · 2018-01-11T17:13:03

I'm not sure if I understood the question, your title is misleading, but I will show how to get the data from the service. I don't think you need a new controller for each item in an ng-repeat, but without more info on why you are trying to do this, I can't help there.

(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";
            }
        }
    }
})();

Create controllers in ng-repeat directive

1 Answers