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 模板：一个用于幻灯片列表，一个用于详细信息。我将 ng-view 添加到第一个 div.slider 中，当我单击图像时，详细信息模板在 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>

我的控制器.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，这是不可能的。

每个应用程序只能有一个ng-view，通常包含应用程序本身。

如果您想添加部分模板，您可以使用ng-includewhich 允许您在其他模板中添加您想要的所有模板。

另一方面，有一个ui-router项目以不同的方式将模板添加到您的视图中。

于 2013-07-17T21:45:20.620 回答