0

いくつかの json を読み取って、angularjs を使用してページに 2 o 3 スライダーを追加する必要があります。私のコードは次のようになります。

 <div class="wrapper">
     <div id="navigation">...</div>

     <div class="slider">
        <ul class="painting">
            <li>
            <a href="#"><img src="img/01.jpg" height="240" width="237"/></a>
            <h1>title</h1>
            <h2>description</h2>
            </li>
            <li>...</li>
            <li>...</li>
        </ul>
    </div>
    <div class="slider">
        <ul class="illustration">
            <li>
            <a href="#"><img src="img/01.jpg" height="240" width="237"/></a>
            <h1>title</h1>
            <h2>description</h2>
            </li>
            <li>...</li>
            <li>...</li>
        </ul>
    </div>

<div class="footer"></div>
</div>

i コード 2 テンプレート: 1 つはスライドのリスト用、もう 1 つは詳細用です。最初の div.slider に ng-view を追加し、画像をクリックすると、詳細テンプレートが div.slider 内で開かれます。代わりに、すべてを消去して本文内に印刷する必要があります。

今のところ、これは私のインデックスです：

<div id="wrapper">
        <div id="navigation">...</div>

    <div id="portfolio" class="sliderCont first">
        <div ng-view class="slider"></div>
    </div>
    <div class="sliderCont">
        <div class="slider"></div>
    </div>
    <div class="sliderCont">
        <div class="slider"></div>
    </div>
    <div class="sliderCont last">
        <div class="slider"></div>
    </div>
</div>

これは私の list.html テンプレートです:

<ul class="works">
<li ng-repeat="work in works">
    <a href="#/works/{{work.id}}"><img src="{{work.thumbUrl}}" height="240" width="237"/></a>
    <h1>{{work.testo1}}</h1>
    <h2>{{work.testo2}}</h2>
</li>
</ul>

私のcontroller.js:

function sliderListCtrl($scope, $http) {
  $http.get('json/slider1.json').success(function(data) {
    $scope.works = data;
  }); 
}
function sliderDetailCtrl($scope, $routeParams, $http) {
  $http.get('json/' + $routeParams.workId + '.json').success(function(data) {
    $scope.work = data;
  });
}

最後に、私の app.js:

angular.module('workList', []).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
  when('/works', {templateUrl: 'partials/work-list.html', controller: sliderListCtrl}).
  when('/works/:workId', {templateUrl: 'partials/work-detail.html', controller: sliderDetailCtrl}).
  otherwise({redirectTo: '/works'});
}]);

誰かが何か考えがありますか？

4

1 に答える 1

0

あなたの質問を理解できるかどうかわかりませんが、タイトル 2-3 を読むとng-view、それは不可能です。

アプリケーションごとに 1 つだけ持つことができng-view、通常はアプリケーション自体が含まれます。

部分的なテンプレートを追加したい場合は、これを使用して、必要なng-includeすべてのテンプレートを他のテンプレートに追加できます。

一方、ui-routerビューにテンプレートを追加する別の方法を持つプロジェクトがあります。

于 2013-07-17T21:45:20.620 に答える