3

我正在尝试使用 WordPress WP-API 实现 Bootstrap UI Angular Carousel。我很好奇如何将“幻灯片”与“帖子”联系起来

演示 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="slide in slides" 显示演示幻灯片。 

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]
    });
  };
});

我将如何实现连接幻灯片和帖子的东西？这样，它会抓取例如帖子中的特色图片并将其插入幻灯片吗？

4

1 回答 1

0

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

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

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

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

这意味着现在当您循环浏览媒体结果时，您可以使用与帖子相同的循环结构，但要对其进行修改，以便设置所需的对象属性：

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

等等。

这里有一个警告......您要确保在尝试循环浏览它们之前拥有帖子和媒体。您当前的控制器将在控制器被实例化后立即进行两个 AJAX 调用（当 Angular 在您的视图上编译 ng-controller 指令时）。这两个调用将异步发生，因此完成顺序未知；您不能依赖超时，您必须使用 q.defer() 链接请求。您需要稍微重写一下控制器，在构造函数中注入 $q，然后链接 promise：

// store the app in a variable so you can write more modules / directives with it
var app = angular.module('app', ['ngRoute', 'ui.bootstrap' ])

// Retrieves Posts
app.controller('Main', function($scope, $http, $routeParams, $q){
    // create a deferred object
    var def = $q.defer();
    var promises = []; // Array of promises for our deferred wrapper

    // All HTTP requests return a promise object; push it on to our array
    promises.push($http.get('wp-json/posts/').success(function(res){
        $scope.posts = res;
    }));

    // Push the 2nd promise
    promises.push($http.get('wp-json/media/').success(function(res){
        $scope.media = res;
    }));

    // Process when all are complete
    def.all(promises).then(function(res)
    { // Successful (promise resolved)
      // Loop through the results in $scope.posts / $scope.media, build your objects
    }, function(res)
    { // Failed (promise rejected)
      // Do something here if a promise is rejected
    });
});

你的 UI Carousel 应该随着你的幻灯片数组的变化而更新！

于 2015-09-11T17:51:27.623 回答