在test-detail.html页面(局部视图)上,不会获取/显示来自各个json文件的数据,即在test-detail.html中调用控制器TestDetailCtrl(可以在工作警报按钮上看到),但是视图中的参数大括号(test-detail.html)是空的。 但是,test-list.html的ListController工作并获取tests.json。
文件结构:
分音/测试list.html:
<form action="" data-ng-repeat="test in tests | orderBy:orderProp">
<input type="checkbox" data-ng-model="item.selected" data-ng-change="change(item)">
<a href="#/tests/{{test.id}}">
<img data-ng-src="{{test.imageUrl}}" alt="{{test.name}}" class="test-thumb">
</a>
<a href="#/tests/{{test.id}}">
{{ test.name }}
</a><br />
</form>
partials / test-detail.html(其中没有显示任何数据且所有复选标记都为false):
<div class="main">
<img data-ng-src="{{mainImageUrl}}"/>
<h2>{{ test.name }}</h2>
<p>{{ test.description }}</p>
Customization:
<ul>
<li>Test items: {{test.customization.items | checkmark }}</li>
<li>Test duration: {{test.customization.duration | checkmark }}</li>
</ul>
</div>
js / app.js中的路由提供者:
app.config(['$routeProvider',
{$routeProvider
.when('/tests',
{templateUrl: 'partials/test-list.html', controller: 'ListController'})
.when('/tests/:testId',
{templateUrl: 'partials/test-detail.html', controller: 'TestDetailCtrl'})
.otherwise({redirectTo: '/tests'});
}]);
使用js / services.js进行RESTful处理:
var appServices;
appServices = angular.module('appServices', ['ngResource']);
appServices.factory('Test', ['$resource',
function($resource){
return $resource('tests/:testId.json', {}, {
query: {method:'GET', params:{testId:'tests'}, isArray:true}
});
}]);
controllers.js:
var ctr = angular.module('myApp.controller', []);
ctr.controller('ListController', ['$scope', 'Test', function ($scope, Test)
{$scope.tests = Test.query(); /*works*/
$scope.orderProp = 'duration';}]);
ctr.controller('TestDetailCtrl', ['$scope', '$routeParams', 'Test', function($scope, $routeParams, Test)
{$scope.$on('$routeChangeSuccess', function() {
$scope.test = Test.get({testId: $routeParams.testId}, function(test) {
$scope.mainImageUrl = test.screenshots[0];
});
$scope.setImage = function(imageUrl) {
$scope.mainImageUrl = imageUrl;
};
$scope.hello = function(name) {
alert('Test ' + (name || 'works' + '!')); /*works*/
}
})}
]);
示例test-a.json:
[{
id: "test-a",
name: "test a",
description: "text ... bla",
"customization": {
"items": true,
"duration": false}
}]
答案 0 :(得分:0)
我认为你在这里将aspx partials与angular-arrays混合在一起。
Angular ng-repeat仅在客户端工作,并在完成加载时评估scope.tests数组。
您的aspx partial(test-detail.html)可能在服务器端工作,并且取决于您使用容器对其进行数据绑定。
编辑:您的test-a.json看起来很奇怪...为什么用括号括起来? (为什么它是一个数组?)partials / test-a.html不是为数组做的。试试这个JSON(test-a.json):
{
id: "test-a",
name: "test a",
description: "text ... bla",
"customization": {
"items": true,
"duration": false}
}