Угловая директива и $ http get

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