在离子混合应用程序

时间:2016-07-25 11:10:39

标签: wordpress ionic-framework frameworks hybrid

我已按照here的指南进行操作,并成功创建了一个有效的基本应用。但是,在提取帖子时,它并未包含特色图片或缩略图。如何获取帖子'缩略图? Here is my app's look

代码:

Menu.html



<ion-side-menus enable-menu-with-back-views="false">
  <ion-side-menu-content>
    <ion-nav-bar class="bar-stable bar-dark">
      <ion-nav-back-button>
      </ion-nav-back-button>

      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
        </button>
      </ion-nav-buttons>
    </ion-nav-bar>
    <ion-nav-view name="menuContent"></ion-nav-view>
  </ion-side-menu-content>

  <ion-side-menu side="left">
    <ion-header-bar class="bar-stable">
      <h1 class="title">BrickFame</h1>
    </ion-header-bar>
    <ion-content>
      <ion-list>
        <ion-item menu-close href="#/app/posts">
          Posts
        </ion-item>
        <!--ion-item menu-close ng-click="login()">
          Login
        </ion-item-->
        <ion-item menu-close href="#/app/search">
          Search
        </ion-item>
        <ion-item menu-close href="#/app/browse">
          Browse
        </ion-item>
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>
&#13;
&#13;
&#13;

app.js

&#13;
&#13;
// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.controllers' is found in controllers.js
angular.module('starter', ['ionic', 'starter.controllers'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
  });
})

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider

  .state('app', {
    url: "/app",
    abstract: true,
    templateUrl: "templates/menu.html",
    controller: 'AppCtrl'
  })

  .state('app.search', {
    url: "/search",
    views: {
      'menuContent': {
        templateUrl: "templates/search.html"
      }
    }
  })

  .state('app.browse', {
    url: "/browse",
    views: {
      'menuContent': {
        templateUrl: "templates/browse.html"
      }
    }
  })
    .state('app.posts', {
      url: "/posts",
      views: {
        'menuContent': {
          templateUrl: "templates/posts.html",
          controller: 'PostsCtrl'
        }
      }
    })

    .state('app.post', {
      url: "/posts/:postId",
      views: {
        'menuContent': {
          templateUrl: "templates/post.html",
          controller: 'PostCtrl'
        }
      }
    })

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/app/posts');
});
&#13;
&#13;
&#13;

Controller.js

&#13;
&#13;
angular.module('starter.controllers', [])

.controller('AppCtrl', function($scope, $ionicModal, $timeout) {
  // Form data for the login modal
  $scope.loginData = {};

  // Create the login modal that we will use later
  $ionicModal.fromTemplateUrl('templates/login.html', {
    scope: $scope
  }).then(function(modal) {
    $scope.modal = modal;
  });

  // Triggered in the login modal to close it
  $scope.closeLogin = function() {
    $scope.modal.hide();
  };

  // Open the login modal
  $scope.login = function() {
    $scope.modal.show();
  };

  // Perform the login action when the user submits the login form
  $scope.doLogin = function() {
    console.log('Doing login', $scope.loginData);

    // Simulate a login delay. Remove this and replace with your login
    // code if using a login system
    $timeout(function() {
      $scope.closeLogin();
    }, 1000);
  };
})

.controller('PostsCtrl', function($scope, $http) {
  // You can change this url to experiment with other endpoints
  var postsApi = 'http://brickfame.rf.gd/wp-json/posts?_jsonp=JSON_CALLBACK';
 
  // This should go in a service so we can reuse it
  $http.jsonp( postsApi ).
    success(function(data, status, headers, config) {
      $scope.posts = data;
      console.log( data );
    }).
    error(function(data, status, headers, config) {
      console.log( 'Post load error.' );
    });
   
})
.controller('PostCtrl', function($scope, $stateParams, $sce, $http ) {

  // we get the postID from $stateParams.postId, the query the api for that post
  var singlePostApi = 'http://brickfame.rf.gd/wp-json/posts/' + $stateParams.postId + '?_jsonp=JSON_CALLBACK';

  console.log( $stateParams.postId );

  $http.jsonp( singlePostApi ).
    success(function(data, status, headers, config) {
      $scope.post = data;

      // must use trustAsHtml to get raw HTML from WordPress
      $scope.content = $sce.trustAsHtml(data.content);

      console.log(data);

    }).
    error(function(data, status, headers, config) {
      console.log( 'Single post load error.' );
    });

})
&#13;
&#13;
&#13;

posts.html

&#13;
&#13;
<ion-view view-title="Posts">
  <ion-content>
    <ion-list>
      <ion-item ng-repeat="post in posts" href="#/app/posts/{{post.ID}}">
        {{post.title}}
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>
&#13;
&#13;
&#13;

0 个答案:

没有答案