Пытается вывести html с угловым js

Question

Im пытается вывести html с угловым js. Я знаю, что html будет в порядке. Это то, что пытается им в настоящее время:

<div class="items-list" id="items-container"> 
     <div ng-repeat="data in ItemsData track by $index" ng-bind-html='ItemsData'> 
      <-data-> 
     </div> 
    </div> 

И это то, что я очень много делаю с данными

$.ajax({ 
         method: "POST", 
         url: "{{URL::route('items')}}", 
         data: filteringData, 
         dataType: 'json' 
        } 
      ).done(function (response) { 
         $scope.ItemsData = $sce.trustAsHtml(response['items']); 
         $scope.ItemsPage += 1; 
         $scope.ItemsLastPage = response['lastPage']; 
         $scope.ItemsLoaderBusy = false; 
        }); 

Но это не работает. Я пытаюсь это сделать в течение длительного времени.

Я очень хочу, чтобы получить ответ с сервера. У него есть «предметы». Его массив элементов, которые являются html. Как я могу вывести их с повторением?

И я действительно не знаю, что я делаю. Спасибо за помощь.

Answer 1

Вы должны использовать переменную data, которую вы определили в ng-repeat для переплета внутри ng-bind-html. Так что измените ItemsData на data.

<div ng-repeat="data in ItemsData track by $index" ng-bind-html='data'> 
    <-data-> 
</div> 

Кроме того, как вы прокомментировали вопрос, который вы получаете сообщение об ошибке при выполнении $sce.trustAsHtml метода, это происходит потому, что вы передаете массив response['items'], когда он ожидает строку.

Предполагая, что response['items'] как массив строк, вы можете попробовать это.

$.ajax({ 
    method: "POST", 
    url: "{{URL::route('items')}}", 
    data: filteringData, 
    dataType: 'json' 
}).done(function(response) { 
    $scope.ItemsData = []; 
    angular.forEach(response.items, function(item) { 
     $scope.ItemsData.push($sce.trustAsHtml(item)); 
    }); 
    $scope.ItemsPage += 1; 
    $scope.ItemsLastPage = response['lastPage']; 
    $scope.ItemsLoaderBusy = false; 
}); 

Кроме того, как указал на @pankajparkar вы должны попытаться использовать $ HTTP вместо JQuery AJAX, потому что он будет работать цикл дайджеста.

Answer 2

Вы никогда не должны были использовать $.ajax, что должно быть заменено вызовом ajax с использованием службы $http. Использование $.ajax не будет работать переваривать цикл по его завершению, где $http мчит переваривать цикл после обратного вызова вызывается

Кроме того, ваши нг-связывание будет ng-bind-html="trustedAsHtml(data)"

тогда ваш контроллер будет иметь один метод trustedAsHtml, который HTML как доверенный с помощью $sce служба

$scope.trustedAsHtml = function(data){ return $sce.trustedAsHtml(data); }