0

test-detail.html ページ (部分ビュー) では、それぞれの json ファイルからのデータは取得/表示されません。つまり、コントローラー TestDetailCtrl は test-detail.html で呼び出されます (動作中のアラート ボタンで確認できます) が、params はカーリーですビュー (test-detail.html) の括弧は空です。ただし、test-list.html の ListController は機能し、tests.json をフェッチします。

ファイル構造:

  • index.html
  • (テスト)
    • tests.json (内容は test-list.html に正しく表示されます)
    • a.json
    • b.json
  • (js)
  • (パーシャル)
  • (CSS)

パーシャル/test-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}
}]
4

1 に答える 1

0

ここでaspxパーシャルと角度配列を混在させていると思います。

Angular ng-repeat はクライアント側でのみ機能し、読み込みが完了すると scope.tests 配列を評価します。

aspx パーシャル (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}
}
于 2016-05-02T12:24:27.310 に答える