在 AngularJS 中应用 Google-Prettify答案

【问题标题】：Applying Google-Prettify in AngularJS在 AngularJS 中应用 Google-Prettify
【发布时间】：2016-01-10 02:45:55
【问题描述】：

我正在尝试在 AngularJS 中应用 Google Prettify；它在主页上运行良好，但在 Angular 路由上（在 ng-view 之后）它不起作用。你可以看看 plunker：

http://plnkr.co/edit/H0JJMYiFlwxlKQXOJgP5?p=preview

顺便说一句，我使用的是这个前置标签：

<pre class="prettyprint lang-cpp">
struct DLLNode {
    int data; 
    struct DLLNode *next; 
    struct DLLNode 'prey;
};  
</pre>

在 ng-view 之后，它无法执行 Google Prettify，但在此之前它可以工作。

【问题讨论】：

可能是因为 prettyprint 脚本运行一次，然后更新页面，然后添加路由模板中的 dom 元素。你需要找到一种在路由加载后触发漂亮打印的方法。

标签： javascript css angularjs ngroute

【解决方案1】：

答案可以在类似的thread中找到。

基本上你必须定义一个新指令：

app.directive('prettyprint', function() {
    return {
        restrict: 'C',
        link: function postLink(scope, element, attrs) {
              element.html(prettyPrintOne(replaceText(element.html()),'',true));
        }
    };
});

【讨论】：