Question

我正在尝试使用WordPress WP-API实现Bootstrap UI Angular Carousel。我很好奇如何连接幻灯片＆＃39;与＆＃39;帖子＆＃39;

演示HTML是......

<div class="carousel" ng-controller="CarouselDemoCtrl">
  <div style="height: 305px">
    <carousel interval="myInterval">
      <slide ng-repeat="slide in slides" active="slide.active">
        <img ng-src="{{slide.image}}" style="margin:auto;">
        <div class="carousel-caption">
          <h4>Slide {{$index}}</h4>
          <p>{{slide.text}}</p>
        </div>
      </slide>
    </carousel>
  </div>
</div>

javascript单独运行正常。例如，我可以使用ng-repeat来显示帖子。样本ng-repeat =＆＃34;在幻灯片中滑动＆＃34;显示演示幻灯片。

angular.module('app', ['ngRoute', 'ui.bootstrap' ])

// Retrieves Posts
.controller('Main', function($scope, $http, $routeParams){
    $http.get('wp-json/posts/').success(function(res){
        $scope.posts = res;
    });

    $http.get('wp-json/media/').success(function(res){
        $scope.media = res;
    });
})

示例Bootstrap实现是......

//Bootstrap Carousel
.controller('CarouselDemoCtrl', function ($scope) {
  $scope.myInterval = 5000;
  var slides = $scope.slides = [];
  $scope.addSlide = function() {
    var newWidth = 600 + slides.length + 1;
    slides.push({
      image: 'http://placekitten.com/' + newWidth + '/300',
      text: ['More','Extra','Lots of','Surplus'][slides.length % 4] + ' ' +
        ['Cats', 'Kittys', 'Felines', 'Cutes'][slides.length % 4]
    });
  };
});

我如何实现连接幻灯片和帖子的内容？这样，它就会抓住一个帖子中的特色图片并将其插入幻灯片中？

Answer 1

我根本不是WP人，但我的方法是循环查看你在“Retrieve Posts”控制器中获得的结果，并重新格式化为幻灯片将使用的简单JSON对象。例如：

GetMessage

同样适用于媒体结果;循环遍历它们并与您的自定义对象对齐。如果你想更容易地访问它们，你可以使用数组表示法而不是.push（）来快速访问每个循环中的对象，假设你有一个ID或者很容易使用的东西，例如：

angular.forEach($scope.posts, function(val, idx)
{
    var newObj = { body: val.postBody, ect: val.postEtc };
    $scope.slides.push(newObj);
});

这意味着现在当你遍历媒体结果时，你可以使用与Posts相同的循环结构，但是修改它以便设置你需要的对象属性：

$scope.slides[val.postID] = { body: val.postBody, etc: val.postEtc };

等等。

这里有一个警告......你想在尝试循环之前确保你有帖子和媒体。一旦控制器被实例化，当前控制器将进行两次AJAX调用（当angular在视图上编译ng-controller指令时）。这两个调用将异步发生，因此完成顺序未知;你不能依赖超时，你必须使用q.defer（）链接请求。你需要重新编写一下控制器，在构造函数中注入$ q，然后链接promises：

// While looping through media objects, assuming the media object has a postID
$scope.slides[media.postID].image = mediaObj.imageUrl;

您的UI轮播应该随着幻灯片阵列的变化而更新！

使用动态内容的Angular Bootstrap-UI轮播

1 个答案: