Question

我试图美化一些动态生成的文本。

<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/

Answer 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));
        }
    };
});

Answer 2

这是一个迟到的回复，我相信你已经解决了这个问题。然而，可能有一些其他人在这个问题上遇到了绊脚石。我解决了这个使用和改编版本的谷歌代码美化，可以在这里找到：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();
})();

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

Answer 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（读者的信息）

[/编辑]

Answer 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));
      });
    }
  };
});

Answer 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));
        }
    };
});

Answer 6

我不知道为什么，但是我发现如果你延迟300ms执行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);
        }
    };
});

在AngularJS中动态调用prettyPrint（）会破坏绑定

6 个答案: