Angular 指令和 $http 获取

Question

我正在努力让我的指令填充来自 api 的数据。如果我用常规的 json 提供它，它工作得很好，但如果我使用 http get 我得到空白（在控制台中的响应很好）。

在这种情况下最佳做法是什么。我发现了一些关于手表的东西，但看起来确实很脏，不是吗？也不太确定它如何符合我的方案..

angular.module('contestantList', [])
  .directive('cContestantList', function() {
    return {
      scope: {},
      templateUrl: '/app/themes/pomgallery/contestant_list.html',
      replace: true,
      controller: 'ContestantListCtrl',
      controllerAs: 'ctrl'
    };
  })
  .controller('ContestantListCtrl', function($scope, $http) {

    $http({
      method: 'GET',
      url: '/wp-json/posts',
      params: {
        'filter[posts_per_page]': 3
      },
    }).
    success( function( data, status, headers, config ) {
      this.contestants = data; /* DOES NOT WORK */
    }).
    error(function(data, status, headers, config) {});

    /* WORKS */
    //this.contestants = [{ "title": "Nadine Shjölin, Solo Exhibition"},{"title": "Hello world!"}]; 
  });

angular.module('PomGallery', ['contestantList']);

Answer 1

this 在成功回调中没有控制器的上下文（不同的范围）

先尝试存储在变量中。

.controller('ContestantListCtrl', function($scope, $http) {
    var vm = this; // store reference to "this"
    $http({
      method: 'GET',
      url: '/wp-json/posts',
      params: {
        'filter[posts_per_page]': 3
      },
    }).
    success( function( data, status, headers, config ) {
      vm.contestants = data;
    })......