使用Angular(Ionic)检索Contentful中的链接条目字段

时间:2016-03-07 02:30:16

标签: angularjs ionic-framework contentful

我是Contentful和Angular的新手(在Ionic工作),并且难以理清如何从Contentful条目的相关内容(又名“链接”)中正确检索字段数据。

按照目前的情况,我可以根据'条款'工厂列出我的条目,并且可以移动到单个条目状态,在该状态中我可以列出链接的内容 - 显而易见,如您所见 - 只是id。

我觉得这可以在/工厂解决,但不太确定如何继续。到目前为止,我没有尝试过任何东西。而且,如果我认为这一切都错了,我很高兴被告知。

非常感谢提前。

services.js

angular.module('app.services', ['ngResource'])

.factory('Terms', function ($resource, $log) {

  var apiGetEntries = 'https://cdn.contentful.com/spaces/SPACE_ID/entries?access_token=MY_ACCESS_TOKEN';

  var terms = $resource(apiGetEntries, null, {

    query: {
      method: 'GET',
      isArray: true,
      transformResponse: function(data, headers) {
        var entriesRaw = angular.fromJson(data);
        var entries = [];
        angular.forEach(entriesRaw.items, function(entry) {
          entries.push(entry);
        });
        console.log(entries);
        return entries;
      }
    }

  });

  return terms;

})

controllers.js

angular.module('app.controllers', [])

.controller('getTerms', function($scope, Terms) {

  $scope.terms = Terms.query();

})

.controller('getTermDetail', function($scope, $http, $stateParams) {

  var apiBasePath = 'https://cdn.contentful.com/spaces/SPACE_ID/entries/';
  var accessToken = 'MY_ACCESS_TOKEN';
  var termId      = $stateParams.termId;

  $http({
    url: apiBasePath + termId, 
    method: "GET",
    params: { access_token: accessToken }
  }).success(function(data, status, headers, config) {
      $scope.term = data;
      if(typeof $scope.term.fields.relatedTo != 'undefined') {
        $scope.relatedTerms = $scope.term.fields.relatedTo
      }
    }).error(function(data, status, headers, config) {
      console.log(data);
    })

});

模板/术语-definition.html

<ion-view view-title="Definition">
  <ion-content class="padding">
    <h2>{{ term.fields.term }}</h2>
    <p>
      {{ term.fields.definition }}
    </p>
    <ion-list>
      <ion-item class="" ng-repeat="relatedTerm in relatedTerms" type="item-text-wrap" href="#/tab/terms/{{ relatedTerm.sys.id }}">
        {{ relatedTerm.sys.id }}
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

1 个答案:

答案 0 :(得分:0)

除非你有一个非常具体的用例,否则你不需要手工完成所有这些操作。您可以使用官方Contentful JS SDK或第三方Angular JS Contentful集成。它们都自动处理链接解析。您可以在此处https://www.contentful.com/developers/docs/concepts/links/和此处https://www.contentful.com/developers/docs/references/content-delivery-api/#/reference/links

查看有关链接的更多信息

希望有所帮助:)