Угловая JS: обнаружение, если ng-bind-html закончила загрузку, затем выделите синтаксис кода

Question

Я использую ng-bind-html для привязки данных, которые я получаю из базы данных.

<p ng-bind-html="myHTML"></p> 


app.controller('customersCtrl', function($scope, $http, $stateParams) { 
    console.log($stateParams.id); 
    $http.get("api link"+$stateParams.id) 
    .then(function(response) { 
     $scope.myHTML = response.data.content; 

     // this will highlight the code syntax 
     $('pre code').each(function(i, block) { 
      hljs.highlightBlock(block); 
     }); 
    }); 
}); 

Когда данные, отображаемые на экране, я хочу, чтобы запустить

$('pre code').each(function(i, block) { 
     hljs.highlightBlock(block); 
}); 

для подсветки синтаксиса кода в данных, но не выделить. (Я использую highlight library in CKEditor для подсветки синтаксиса кода)

И если я оттянуть загрузить код выделения после 1s, он будет работать, но я думаю, что это не является хорошим решением

setTimeout(function() { 
    $('pre code').each(function(i, block) { 
     hljs.highlightBlock(block); 
    }); 
    }, 1000); 

Я думаю, может быть код выделить пробег до ng-bind-html закончен.

=== UPDATE
Я использую $timeout со временем задержки 0, как несколько человек рекомендуют. Тем не менее, когда-то, когда сеть работает медленно и медленная загрузка страницы, код не будет выделен.

$scope.myHTML = response.data.content; 
$timeout(function() { 
    $('pre code').each(function(i, block) { 
     hljs.highlightBlock(block); 
    }); 
}, 0); 

Answer 1

Здесь директивы приходят очень кстати. Почему бы не добавить HTML самостоятельно, а затем запустить маркер?

Шаблон:

<div ng-model="myHTML" highlight></div> 

Директива:

.directive('highlight', [ 
    function() { 
     return { 
      replace: false, 
      scope: { 
       'ngModel': '=' 
      }, 
      link: function (scope, element) { 
       element.html(scope.ngModel); 
       var items = element[0].querySelectorAll('code,pre'); 
       angular.forEach(items, function (item) { 
        hljs.highlightBlock(item); 
       }); 

      } 
     }; 
    } 
]); 

Пример: http://plnkr.co/edit/ZbcNgfl6xL2QDDqL9cKc?p=preview

Answer 2

, как вы знаете, заявления выполнить асинхронно, если нет тайм-аута $ («предварительно код») будет пустым, поскольку DOM еще не оказаны. использовать $ timeout вместо setTimeout для того же самого.

Answer 3

Итак, вот что происходит:

1. Вы обновить $scope.myHTML Значение
2. Вы запускаете ваш Jquery each() петли
3. В digest cycle работает и ваш шаблон обновляются

Обратите внимание, что цикл дайджеста работает после вашего цикла JQuery each() - или, точнее, после того, как ваш $http функция обратного вызова завершена.

Это означает, что значение $scope.myHTML в вашем контроллере не применяется к директиве ng-bind-html до тех пор, пока ваша петля не закончится.

Чтобы преодолеть это, вы можете использовать функцию Angular's $timeout вместо собственного браузера setTimeout().По умолчанию $timeout вызовет функцию обратного вызова во время следующего цикла дайджеста, что означает, что он будет работать после внесения изменений в $scope.myHTML в директиву ng-bind-html (при условии, что вы обновите $scope.myHTML перед вызовом $timeout()).

Рабочий пример: JSFiddle