角JS：检测如果异常绑定-HTML装完然后突出显示code语法 [英] Angular JS: Detect if ng-bind-html finished loading then highlight code syntax

问题描述

我使用 NG-绑定-HTML 绑定，我从数据库中获取的数据。

 ＆LT; p NG绑定-HTML =MYHTML＆GT;＆LT; / P＆GT;
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，然后运行荧光笔？

模板：

 ＆LT; D​​IV NG模型=MYHTML高亮＆GT;＆LT; / DIV＆GT;
 

指令：

  .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屋！