角JS:检测如果异常绑定-HTML装完然后突出显示code语法 [英] Angular JS: Detect if ng-bind-html finished loading then highlight code syntax
问题描述
我使用 NG-绑定-HTML
绑定,我从数据库中获取的数据。
< p NG绑定-HTML =MYHTML>< / P>
app.controller('customersCtrl',函数($范围,$ HTTP,$ stateParams){
的console.log($ stateParams.id);
$ http.get(API链接+ $ stateParams.id)
。然后(功能(响应){
$ scope.myHTML = response.data.content; //这将突出code语法
$('pre code')。每个(函数(I,块){
hljs.highlightBlock(块);
});
});
});
当在屏幕上显示的数据,我想运行
$('pre code')。每个(函数(I,块){
hljs.highlightBlock(块);
});
有关的亮点在数据中的code语法,但它并不突出。 (我用亮点库中的CKEditor 以彰显code语法)
如果我延迟加载后1秒的亮点code,它可以工作,但我认为这不是一个很好的解决方案。
的setTimeout(函数(){
$('pre code')。每个(函数(I,块){
hljs.highlightBlock(块);
});
},1000);
我想也许亮点code NG-绑定-HTML
完成之前运行。
===
更新结果
我使用 $超时
延迟时间0一些人的建议。然而,某个当网络很慢,页面加载缓慢,code不会高亮显示。
$ scope.myHTML = response.data.content;
$超时(函数(){
$('pre code')。每个(函数(I,块){
hljs.highlightBlock(块);
});
},0);
这是哪里来的指令非常方便。为什么不自己追加的HTML,然后运行荧光笔?
模板:
< DIV NG模型=MYHTML高亮>< / DIV>
指令:
.directive('亮点',[
功能(){
返回{
更换:假的,
范围: {
ngModel':'='
},
链接:功能(范围,元素){
element.html(scope.ngModel);
VAR项目=元素[0] .querySelectorAll('code,pre');
angular.forEach(项目功能(项目){
hljs.highlightBlock(项目);
}); }
};
}
]);
例如: http://plnkr.co/edit/ZbcNgfl6xL2QDDqL9cKc?p=preVIEW
I am using ng-bind-html
for binding data that I get from database.
<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);
});
});
});
When the data displayed on the screen, I want to run
$('pre code').each(function(i, block) {
hljs.highlightBlock(block);
});
for highlight the code syntax in the data but it is not highlight. (I use highlight library in CKEditor for highlight the code syntax)
And if I delay load the highlight code after 1s, it will work but I think it is not a good solution
setTimeout(function () {
$('pre code').each(function(i, block) {
hljs.highlightBlock(block);
});
}, 1000);
I think maybe the highlight code run before ng-bind-html
finished.
===
UPDATE
I am using $timeout
with delay time 0 as some person recommend. However, sometime when the network is slow and the page load slow, the code will not highlighted .
$scope.myHTML = response.data.content;
$timeout(function() {
$('pre code').each(function(i, block) {
hljs.highlightBlock(block);
});
}, 0);
This is where directives come in very handy. Why not append the HTML yourself and then run the highlighter?
Template:
<div ng-model="myHTML" highlight></div>
Directive:
.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);
});
}
};
}
]);
Example: http://plnkr.co/edit/ZbcNgfl6xL2QDDqL9cKc?p=preview
这篇关于角JS:检测如果异常绑定-HTML装完然后突出显示code语法的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!