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

Question

我正在尝试使用 WordPress WP-API 实现 Bootstrap UI Angular 轮播。我很好奇如何将 'slides' 与 'posts'

连接起来

演示 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 来显示 posts。示例 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]
    });
  };
});

我将如何实现连接幻灯片和 post 的东西？这样，它就可以从 post 中抓取特色图片并将其插入到幻灯片中？

Answer 1

我根本不是 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 };

这意味着现在当您循环访问 Media 结果时，您可以使用与 Posts 相同的循环结构，但要修改它以便设置您需要的对象属性：

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

以此类推

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

// 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 轮播应该随着幻灯片阵列的变化而更新！

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

Angular Bootstrap-UI Carousel using Dynamic Content

angularjs

angular-ui-bootstrap

wp-api