在 ng-repeat 指令中创建控制器

Posted 2023-02-23

【中文标题】在 ng-repeat 指令中创建控制器

【英文标题】：Create controllers in ng-repeat directive

【发布时间】：2018-06-20 14:27:08

【问题描述】：

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

AngularJS 服务代码

（函数（）
    '使用严格';
    有角度的
        .module('应用程序')
        .factory('questionsDataService', questionsDataService);

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

    功能问题数据服务（$http）
        返回 
            获取元数据：函数（taskId）
                var metaData = $http.get('api/toDo/taskVariables/' + taskId).then(
                    功能（响应）
                        返回响应。数据；
                    );
                返回元数据；
            ,

            getQuestionsData：函数（taskId）
                var questionsData = $http.get('api/toDo/getQuestions/' + taskId).then(
                    功能（响应）
                        返回响应。数据；
                    );
                返回问题数据；
            
        
    
)();

【问题讨论】：

您刚刚在这篇文章中添加了所有代码，这使得阅读和理解变得非常困难。我建议对其进行编辑，并在此处仅包含相关部分以使其清晰可见。您可以在小提琴中添加所有必需的代码并在此问题中发布链接。

你名字 Micha"l" 的最后一个字符是什么？看起来好像有什么东西在经过。我认为这是我屏幕上的污点，直到我滚动并仍然看到它。

感谢您的建设性回答；）这是波兰字母表中的字母

【参考方案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";
            
        
    
)();

【讨论】：

嗨，泰勒，感谢您的回复。我知道如何从控制器中的服务访问数据。我的目标是创建问题（包含来自服务的数据的 iframe），并且每个问题都必须具有单独的范围。由于项目的性能，这是必要的