Использование angularjs и json wordpress api не может получить доступ к текущему значению в app.factory $ resource

Я только начал использовать angularjs, и я пытаюсь подключить backpress Wordpress к переднему концу Angularjs.

это мой index.html

<!DOCTYPE html> 
<html ng-app="applicazioneIndex"> 
<head> 
<title>AngularJS GET request with PHP</title> 
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.24/angular.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.24/angular-sanitize.min.js"></script> 
    <link data-require="[email protected]" data-semver="2.3.2" rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" /> 
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.0/ui-bootstrap-tpls.min.js"></script> 
    <script data-require="[email protected]*" data-semver="1.2.14" src="http://code.angularjs.org/1.2.14/angular-resource.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
    <meta charset="UTF-8"> 
</head> 

    <body > 

<div class="row"> 
    <div class="container"> 
<div ng-controller="ApplicazioneController"> 
     <input type="text" ng-model="searchFilter" class="form-control"> 
    <table class="table table-hover"> 
     <thead> 
     <tr> 
      <th>{{currentPage}} di {{totalItems}} {{watchPage}}</th> 
      <th>post_content</th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr ng-repeat="post in filteredArticoli | filter:searchFilter"> 
      <td>{{post.title}}</td> 
      <td><a ng-href="{{post.featured_image.source}}"><img ng-src="{{post.featured_image.attachment_meta.sizes.thumbnail.url}}"></a></td> 
      <td ng-bind-html="post.excerpt"></td> 

     </tr> 
     </tbody> 
    </table> 



     <pagination boundary-links="true" 
      max-size="5" 
      items-per-page="itemsPerPage" 
      total-items="totalItems" 
      ng-model="currentPage" 
      ng-change="pageChanged(page)"></pagination> 




</div> 
</div> 



</div> 
    </body> 



</html>

и это мой script.js с угловым кодом (я знаю, что это все в одном файле, и это плохо)

var req = new XMLHttpRequest(); 
var URL = "/wp-json/posts"; 
req.open('GET', URL, false); 
req.send(null); 
var maxpagine = req.getResponseHeader("X-WP-TotalPages"); 
var totarticoli = req.getResponseHeader("X-WP-Total"); 
var currentPage = ''; 
var newPage = ''; 


    var app = angular.module('applicazioneIndex', ['ui.bootstrap','ngSanitize','ngResource']); 

    app.controller('ApplicazioneController', function ($scope, applicazioneFactory) { 



applicazioneFactory.get({ id: 1 }, function(data) { 
$scope.posts = data; 
alert(posts); 
}); 

    $scope.articoli = applicazioneFactory.query(); 

    $scope.itemsPerPage = 3; 
    $scope.currentPage = 1; 
    $scope.totalItems = totarticoli; 

    $scope.articoli.$promise.then(function() { 


    $scope.$watch('currentPage + itemsPerPage', function() { 

     var begin = (($scope.currentPage - 1) * $scope.itemsPerPage), 
     end = begin + $scope.itemsPerPage; 
    $scope.filteredArticoli = $scope.articoli.slice(begin, end); 

    }); 

    }); 

     $scope.$watch('currentPage', function(newPage){ 
    $scope.watchPage = newPage; 
    alert(newPage); 

    }); 

}); 


app.factory('applicazioneFactory', function ($resource) { 

    return $resource("/wp-json/posts?page=" + currentPage); 

});

Pagination работает отлично , Я получаю значения из XMLHttpRequest, загружается меню начальной загрузки, но я не могу заполнять контент разными JSON.

Моя цель - загрузить различные файлы JSON с использованием значения $currentPage, изменяясь при работе с постраничной разбивкой (для этого есть предупреждение, чтобы вывести текущее значение).

с помощью $scope.$watch('currentPage', function(newPage) я могу получить CurrentPage значение внутри контроллера

Я также Plunker здесь http://plnkr.co/edit/hplfuBIOLDHUgUp6lU0A где я положил статический файл JSON вместо динамического RESTful URL запроса.

Как я могу поместить значение $currentPage в app.factory?

источник

2014-10-07 Cristiano Zanca

Благодаря thi s: How to load json into my angular.js ng-model?

Я нашел решения: Удалите бесполезную app.factory, загрузите все данные в контроллер и поверните JSON, используя currentPage change from bootstrap pagination.

Это Рабочими script.js код:

var req = new XMLHttpRequest(); 
var URL = "/wp-json/posts"; 
req.open('GET', URL, false); 
req.send(null); 
var maxpagine = req.getResponseHeader("X-WP-TotalPages"); 
var totarticoli = req.getResponseHeader("X-WP-Total"); 
var currentPage = ''; 
var newPage = ''; 


var app = angular.module('applicazioneIndex', ['ui.bootstrap','ngSanitize','ngResource']); 


app.controller('ApplicazioneController', function($scope, $http) { 
    $scope.itemsPerPage = 5; 
    $scope.currentPage = 1; 
    $scope.totalItems = totarticoli; 

$scope.$watch('currentPage', function(newPage){ 
    $scope.watchPage = newPage; 


    $http.get('/wp-json/posts?page=' + newPage) 
     .then(function(res){ 
      $scope.filteredArticoli = res.data; 
$scope.$watch('currentPage + itemsPerPage', function() { 

     var begin = (($scope.currentPage - 1) * $scope.itemsPerPage), 
     end = begin + $scope.itemsPerPage; 
    $scope.filteredArticoli = $scope.articoli.slice(begin, end); 

     }); 

    }); 

    }); 

});

Большое спасибо Sven Шюрманн, который помог мне в поиске различных направлениях.

источник

2014-10-08 20:55:25

Это будет проще при загрузке всех ваших сообщений и сохранении их в переменной $scope. И по этой переменной вы можете применить фильтр. В AngularJS можно создавать собственные фильтры.

Позволяет просмотреть документацию модуля filter.

Пример

angular.module('App.filters', []).filter('postFilter', [function() { 
    return function (posts, startPost, endPost) { 
     if (!angular.isUndefined(posts) && !angular.isUndefined(startPost) && !angular.isUndefined(endPost)) { 
      var tempPosts = []; 

      for(var i=startPost;i<endPost;i++){ 
       tempPosts.push(posts[i]); 
      } 

      return tempPosts; 
     } else { 
      return posts; 
     } 
    }; 
}]);

Обычно это должно быть возможным, чтобы контролировать количество заданных сообщений с помощью REST-интерфейс.

UPDATE

Хорошо, я верю, что теперь вы хотите. Вы можете добавить свои собственные действия с ресурсами. Что-то вроде этого:

app.factory('applicazioneFactory', ['$resource', function ($resource) { 
    var url = '/wp-json/:action/'; 
    return $resource(url, {}, { 
     getNextPosts: { params: {action: 'posts'}, method: 'GET', isArray: true }, 
    }); 
}]);

Вы можете вызвать этот метод так:

applicazioneFactory.getNextPosts({'count': 5, 'page': 1, 'post_type': 'Category1'}) 
applicazioneFactory.getNextPosts({'count': 5, 'page': 1, 'post_type': 'Category2'}) 
applicazioneFactory.getNextPosts({'count': 5, 'page': 1, 'post_type': 'Category3'})

HTTP-запросы:

http://<yourhost>/wp-json/posts/?count=5&page=1&post_type=Category1 http://<yourhost>/wp-json/posts/?count=5&page=1&post_type=Category2 http://<yourhost>/wp-json/posts/?count=5&page=1&post_type=Category3

Более подробную информацию вы найдете в документация: ngResource

UPDATE 2

Вам не нужно переменный внутри вашего завода, и это не проблема использовать самозагрузки нумерации. Пожалуйста, покажите ниже. У меня есть функция pageChange() внутри от ваших контроллеров $scope.

var app = angular.module('applicazioneIndex', ['ui.bootstrap','ngSanitize','ngResource']); 

app.controller('ApplicazioneController', function ($scope, applicazioneFactory) { 

    $scope.itemsPerPage = 3; 
    $scope.currentPage = 1; 
    $scope.totalItems = 0; 

    $scope.pageChange = function(){ 
     applicazioneFactory.query({'count': $scope.itemsPerPage, 'page': $scope.currentPage}).$promise.then(function(data, status, headers, config){ 
     $scope.totalItems = headers["X-WP-Total"]; 
     $scope.filteredArticoli = data; 
     }); 
    } 
    // Init on page load 
    $scope.pageChange(); 
}); 


app.factory('applicazioneFactory', function ($resource) { 
    return $resource('/wp-json/posts'); 
});

HTML-сниппетов

<div class="row"> 
    <div class="container"> 
     <div ng-controller="ApplicazioneController"> 
      <input type="text" ng-model="searchFilter" class="form-control"> 
       <table class="table table-hover"> 
        <thead> 
         <th>{{currentPage}} di {{totalItems}} {{watchPage}}</th> 
         <th>post_content</th> 
        </thead> 
        <tbody> 
         <tr ng-repeat="post in filteredArticoli | filter:searchFilter"> 
          <td>{{post.title}}</td> 
          <td><a ng-href="{{post.featured_image.source}}"><img ng-src="{{post.featured_image.attachment_meta.sizes.thumbnail.url}}"></a></td> 
          <td ng-bind-html="post.excerpt"></td> 

         </tr> 
        </tbody> 
       </table> 
     </div> 
    </div> 
</div> 

<pagination boundary-links="true" max-size="5" items-per-page="itemsPerPage" total-items="totalItems" ng-model="currentPage" ng-change="pageChange()"></pagination>

Everytime вы щелкаете на пагинации функции pageChange() будет называться и отправьте HTTP-запросы:

http://<yourhost>/wp-json/posts/?page=1

Надеется, что это поможет вам

источник

2014-10-07 15:30:36

Я думаю, что загрузка данных всех записей вместе должна быть предотвращена, потому что в случае загрузки тысяч статей требуется слишком много времени загрузки: разделение их на меньшие json-файлы полезно. в любом случае, за ваш быстрый ответ –

Я согласен! Мое решение в порядке, за меньшее количество сообщений. Ваш REST-интерфейс должен иметь возможность контролировать количество заданных сообщений через параметризованные HTTP-запросы. Таким образом, вы можете загружать требуемые записи с динамическим нажатием на разбиение на страницы. Пример для REST-Call: 'http: // /wp-json/posts/all? Start = 1 & end = 3' –

Уважаемый Sven Pagination, используя [link] (http://angular-ui.github.io/bootstrap /) работает отлично. То, что не работает, - это получить значение '$ currentPage' внутри app.factory, это возможно в контроллере с использованием $ watch, и я тестирую его с помощью предупреждения' $ scope. $ Watch ('currentPage', function (newPage) { $ scope.watchPage = newPage; alert (newPage); 'но я не могу получить одно значение даже при использовании' $ watch' –

Использование angularjs и json wordpress api не может получить доступ к текущему значению в app.factory $ resource

ответ

Смежные вопросы