[英]Create controllers in ng-repeat directive
I'd like to create dynamically controllers responsible for view of data from REST API. 我想动态创建负责从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).
我的想法是对服务中的数据使用ng-repeat指令,并在其内部使用ng-repeat输出的参数通过ng-controller指令创建对象(最重要的条件是每个问题必须有自己的$ scope)。 Unfortunatelly I don't know how to pass data from service.
不幸的是,我不知道如何从服务传递数据。
AngularJS service code 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; } } } })();
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.
我认为您无需为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";
}
}
}
})();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.