角控制器不具约束力的服务对象属性NG-重复 [英] Angular controller is not binding service object property ng-repeat
问题描述
我有显示从模板中的一个服务返回数组的物品麻烦。我相信我正确地使用控制器的语法，它在我的控制器，模板使用，以及在我的.config（）$状态（UI路由器）块。但由于某些原因，它没有显示在页面上的任何东西。
我试着在铬调试，当我把一个破发点中的控制器，vm.processes举行的对象（4项的数组，一切都签出），但再次什么也没有在视图中显示，这是奇怪的B / ç虚拟机。暴露给从模板访问控制器中的任何所以它应该能够
我定义了一个简单的服务，返回JSON对象，我遇到了麻烦，使用$抓住文件本身的HTTP，所以我只是选择了硬code在服务文件中的值：
.factory（'的DataService'，函数的DataService（$ HTTP）{
返回{
getProcesses：getProcesses
}; 功能getProcesses（）{
//返回$ http.get（'数据\\ processes.json'）
//。然后（getProcessesComplete）
// .catch（getProcessesFailed）; //函数getProcessesComplete（响应）{
//返回response.data.results;
//} //功能getProcessesFailed（错误）{
//执行console.log（'错误检索过程。'+ error.data）;
//} 返回{
流程：
{
名：mergeFiles
标识：1，
说明：在合并/服务器上的3个文件的文件，
scheduledRun：{
startTime时：2016-06-27T18：25：00，
ENDTIME：2016-06-27T18：26：00
}
}，
{
名：monthlyImport
ID：2，
说明：在服务器1导入记录，
scheduledRun：{
startTime时：2016-06-01T12：00：00，
ENDTIME：2016-06-01T18：05：00
}
}，
{
名：tickeTrakBilling
ID：3，
说明：......
scheduledRun：{
startTime时：2016-06-27T19：15：00，
ENDTIME：2016-06-27T18：20：00
}
}，
{
名：batch092
ID：4，
说明：运行于服务器4 batch092.bat
scheduledRun：{
startTime时：2016-06-27T1：25：00，
ENDTIME：2016-06-27T11：26：00
}
}
]
};
}
}）;
现在控制器使用控制器语法编写：
控制器（'ProcessController'，ProcessController）;功能ProcessController（DataService的）{
VAR VM =这一点;
VAR的DataService DataService的=; vm.processes = dataService.getProcesses（）;
}
所以现在的控制器应揭露JSON对象
的 ＆LT; DIV CLASS =容器NG-控制器=ProcessController为VM＆GT;
＆LT; DIV CLASS =工作NG-重复=，在vm.processes过程＆GT;
＆LT;！ - 标题[作业名称] - ＆GT;
＆LT; H3类=作业名＆GT; {{process.name}}＆LT; / H3 GT＆;
＆LT;！ - 正文[作业详情] - ＆GT;
＆LT; DIV CLASS =容器＆GT;
＆所述p为H.; {{process.description}}＆下; / P＆GT;
＆LT; UL类=工作的细节＆GT;
＆LT;立GT;
{{process.scheduledRun.startTime}}
＆LT; /李＆GT;
＆LT;立GT;
{{process.scheduledRun.endTime}}
＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
的状态被定义如下：
.STATE（'过程'，{
网址：'/月/：日'，
templateUrl：/app/templates/process.html'，
控制器：'ProcessController'，
controllerAs：VM
}）;
您不能使用控制器语法使用定义的 $ routePovider 或 $ stateProvider 以及 NG-控制器。删除您的 NG-控制器模板HTML和您的code将工作：
HTML
＆LT; DIV CLASS =容器＆GT;
＆LT; DIV CLASS =工作NG-重复=，在vm.processes过程＆GT;
＆LT;！ - 标题[作业名称] - ＆GT;
＆LT; H3类=作业名＆GT; {{process.name}}＆LT; / H3 GT＆;
＆LT;！ - 正文[作业详情] - ＆GT;
＆LT; DIV CLASS =容器＆GT;
＆所述p为H.; {{process.description}}＆下; / P＆GT;
＆LT; UL类=工作的细节＆GT;
＆LT;立GT;
{{process.scheduledRun.startTime}}
＆LT; /李＆GT;
＆LT;立GT;
{{process.scheduledRun.endTime}}
＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
此外，在某些情况下， controllerAs 不起作用。尝试使用控制器：ProcessController为VM 语法在这种情况下
I'm having trouble displaying the items of an array returned from a service in the template. I believe I'm using the controller as syntax correctly, it is used in my controller, template, as well as in my .config() $state (ui-router) block. But for some reason it is not displaying anything on the page.
I tried debugging in chrome and when I placed a break point in the controller, vm.processes held the object (an array with 4 items, everything checked out) but again nothing was displayed in the view, which is odd b/c vm. exposes anything in the controller so it should be able to be accessed from the template.
I defined a simple service that returns a JSON object, I was having trouble grabbing the file itself using $http so I just opted to hardcode the values in the service file:
.factory('dataservice', function dataservice($http) {
return {
getProcesses: getProcesses
};
function getProcesses() {
// return $http.get('data\processes.json')
// .then(getProcessesComplete)
// .catch(getProcessesFailed);
// function getProcessesComplete(response) {
// return response.data.results;
// }
// function getProcessesFailed(error) {
// console.log('Error retrieving processes. ' + error.data);
// }
return {
"processes": [
{
"name": "mergeFiles",
"id": 1,
"description": "Merge files in /files on server 3",
"scheduledRun": {
"startTime": "2016-06-27T18:25:00",
"endTime": "2016-06-27T18:26:00"
}
},
{
"name": "monthlyImport",
"id": 2,
"description": "Import records on server 1",
"scheduledRun": {
"startTime": "2016-06-01T12:00:00",
"endTime": "2016-06-01T18:05:00"
}
},
{
"name": "tickeTrakBilling",
"id": 3,
"description": "...",
"scheduledRun": {
"startTime": "2016-06-27T19:15:00",
"endTime": "2016-06-27T18:20:00"
}
},
{
"name": "batch092",
"id": 4,
"description": "run batch092.bat on server 4",
"scheduledRun": {
"startTime": "2016-06-27T1:25:00",
"endTime": "2016-06-27T11:26:00"
}
}
]
};
}
});
now the controller is written using the Controller As syntax:
controller('ProcessController', ProcessController);
function ProcessController(dataservice) {
var vm = this;
var dataService = dataservice;
vm.processes = dataService.getProcesses();
}
so now the controller should expose JSON object
the template is as follows:
<div class="container" ng-controller="ProcessController as vm">
<div class="job" ng-repeat="process in vm.processes">
<!-- Header [Job Name] -->
<h3 class="job-name">{{ process.name }}</h3>
<!-- Body [Job details] -->
<div class="container">
<p>{{ process.description }}</p>
<ul class="job-details">
<li>
{{ process.scheduledRun.startTime }}
</li>
<li>
{{ process.scheduledRun.endTime }}
</li>
</ul>
</div>
</div>
The state is defined as follows:
.state('process', {
url: '/:month/:date',
templateUrl: '/app/templates/process.html',
controller: 'ProcessController',
controllerAs: vm
});
You cannot use controller as syntax defined using $routePovider or $stateProvider along with ng-controller. Remove your ng-controller in template html and your code will work:
HTML
<div class="container">
<div class="job" ng-repeat="process in vm.processes">
<!-- Header [Job Name] -->
<h3 class="job-name">{{ process.name }}</h3>
<!-- Body [Job details] -->
<div class="container">
<p>{{ process.description }}</p>
<ul class="job-details">
<li>
{{ process.scheduledRun.startTime }}
</li>
<li>
{{ process.scheduledRun.endTime }}
</li>
</ul>
</div>
</div>
</div>
Also in some cases controllerAs doesn't work. Try using controller: ProcessController as vm syntax in that case
这篇关于角控制器不具约束力的服务对象属性NG-重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
