在 AngularJS 中动态调用 prettyPrint() 会破坏绑定答案

【问题标题】：Calling prettyPrint() dynamically in AngularJS ruins binding在 AngularJS 中动态调用 prettyPrint() 会破坏绑定
【发布时间】：2014-01-31 15:32:33
【问题描述】：

我正在尝试美化一些动态生成的文本。

<div ng-app="Knob" ng-controller="myCtrl">
    <pre class="prettyprint">{{text}}</pre>
</div>

var App = angular.module('Knob', []);
App.controller('myCtrl', function($scope) {
   $scope.text = "hello world";
})

App.directive('prettyprint', function() {
    return {
        restrict: 'C',
        link: function postLink(scope, element, attrs) {
              prettyPrint();
        }
    };
});

输出：

hello worldtext}}

有什么想法吗？

http://jsfiddle.net/yAv4f/62/

【问题讨论】：

标签： angularjs google-code-prettify

【解决方案1】：

可以通过一个小指令来实现。在这里找到答案AngularJs how to call prettyprint?

我想对@carlosmantilla 的指令做一点补充

您可以在不创建范围变量的情况下实现相同的目标。我已经在 github 上添加了这个更正

我认为这应该可以正常工作。

http://jsfiddle.net/yAv4f/143/

var App = angular.module('Knob', []);
App.controller('myCtrl', function($scope) {
    $scope.text = "function f1(){int a;}";
})

function replaceText(str)
{
    var str1 = String(str);
    return str1.replace(/\n/g,"<br/>");
}

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

【讨论】：

你好。如果您需要链接到资源以提供答案，请在您的帖子中包含文章/网站/答案的摘要，以防将来链接损坏。

【解决方案2】：

这是一个迟到的回复，我确信你已经解决了这个问题。但是，可能还有其他一些人在遇到相同问题时偶然发现了此线程。我使用和改编版的 google-code prettify 解决了这个问题，可以在这里找到：https://github.com/angular/code.angularjs.org/tree/master/1.3.0-beta.3/docs/components/google-code-prettify-1.0.1 只需按照该页面上的说明进行操作即可。

现在，可以全局调用 prettifyPrint()。

(function(){
    $('pre').addClass('prettyprint');
    prettyPrint();
})();

我把它放在动态模板的底部

【讨论】：

【解决方案3】：

很难说，prettyPrint() 应该返回什么？

你没有给 prettyPrint 提供任何参数似乎很奇怪......

顺便说一句，我认为角度过滤器比指令更适合您的需求。

[编辑]

这个正在使用过滤器“动态”工作：

html：

<div ng-app="Knob" ng-controller="myCtrl">
    <!--<input ng-model="text" type="text"/>-->
    <pre ng-bind-html-unsafe="text|pretty"></pre>
</div>

js：

var App = angular.module('Knob', []);
App.controller('myCtrl', function($scope) {
    setTimeout(function() {
        $scope.text = "class Voila {};";
        $scope.$apply();
    }, 0);
});

App.filter('pretty', function(){
    return function(text) {
        return prettyPrintOne(text);
    }
})

你可以在

看到

http://jsfiddle.net/cSXpV/1/

您可以取消注释输入以直接更改将被美化的文本

请注意，此版本适用于 Angular 1.1.1（您在初始 jsfiddle 中选择的版本），对于 Angular 1.2.*，您必须使用 ng-bind-html 和 ngSanitize 模块

最后一点：现在它是动态修饰的，setTimeOut 和 $scope.$apply 可以删除（读者信息）

[/编辑]

【讨论】：

pretty print 是 Google Code Prettify 的一部分 google-code-prettify.googlecode.com/svn/trunk/README.html
好的，恕我直言，你的指令没用，只需删除它就可以了（漂亮的打印代码）。
据我所知，prettyPrint 的目的是在事件回调中调用，但链接函数不是事件回调，所以在这种情况下，Google 漂亮的只是在做一些乱七八糟的事情......跨度>
它不起作用 - 它应用了类，是的，但不能正确地为实际代码着色语法。
我使用了“int function(int i, int j);”作为 jsfiddle 中的文本代码，并且有一些颜色（在删除指令之后）。此外，您正在创建一个与 Google 美化器已经使用的类同名的指令，以在那里启动美化，可能的冲突......

【解决方案4】：

我的指令。它正在等待$viewContentLoaded 以确保其中的模板 var({{}}) 已经由 angular 计算。应该用在<pre>

.directive('prettyprint', function() {
  return {
    restrict: 'C',
    link: function postLink(scope, element) {
      scope.$on('$viewContentLoaded', function(){
        element.html(prettyPrintOne(element.html(),'',true));
      });
    }
  };
});

【讨论】：

【解决方案5】：

请尝试使用 ng-bind-html。

<div ng-app="Knob" ng-controller="myCtrl">
    <pre class="prettyprint" ng-bind-html="text"></pre>
</div>


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

【讨论】：

【解决方案6】：

我不知道为什么，但我发现如果你延迟 300 毫秒来执行prettyprint 函数，它运行良好。见下文：

var App = angular.module('Knob', []);
App.controller('myCtrl', function($scope) {
   $scope.text = "hello world";
})

App.directive('prettyprint', function() {
    return {
        restrict: 'C',
        link: function postLink(scope, element, attrs) {
              setTimeout(prettyPrint,300);
        }
    };
});

【讨论】：