Question

我正在努力让我的指令填充来自api的数据。如果我用普通的json喂它就可以正常工作，但如果我使用http获取空白（控制台中的响应很好）。

此方案中的最佳做法是什么。我发现了一些关于手表的东西，但看起来很脏，不是吗？也不太确定它如何影响我的场景..

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;
    })......

Angular Directive和$ http get

1 个答案: