Question

我正在尝试为我的angularjs应用程序使用prettyprint插件。

但不能使它有效。我创建了一个简单的指令和调用方法prettyPrint（），但代码没有格式化。

FIDDLE：http://jsfiddle.net/Tropicalista/yAv4f/2/

App.directive('test', function() {
return {
    restrict: 'A',
    link: function(scope, element, attrs) {
        $(element).prettyPrint()
    }
};
});

Answer 1

我修改了你的代码，我会在这里更新： http://jsfiddle.net/yAv4f/6/

HTML：

<div ng-app="Knob" ng-controller="myCtrl">
   <pre class="prettyprint linemus"></pre>
   <pre class="prettyprint linemus">&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;/html&gt;</pre>
</div>

的javascript：

var App = angular.module('Knob', []);
App.controller('myCtrl', function($scope) {
    $scope.dom = '&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;/html&gt;'
})

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

基本上，您需要使用文件prettify.js来控制prettify（）函数的执行，使用prettyPrintOne（）可以在特定的html文本中执行它。

为了简化指令的使用，比如美化stlyle，我建议将'C'限制为一个类，并将指令名更改为'prettyprint'

Answer 2

我扩展了之前的答案并创建了一个带有工作指令的jsfiddle，它可以实时响应模型更改：

http://jsfiddle.net/smithkl42/cwrgLd0L/27/

HTML：

<div ng-app="prettifyTest" ng-controller="myCtrl">
    <div>       
        <input type="text" ng-model="organization.message" />
    </div>
    <prettify target="organization"><pre><code class="prettyprint">console.log('{{target.message}}');
            </code>
        </pre>
    </prettify>
</div>

JS：

var App = angular.module('prettifyTest', []);
App.controller('myCtrl', function ($scope) {
    $scope.organization = {
        message: 'Hello, world!'
    };
});

App.directive('prettify', ['$compile', '$timeout', function ($compile, $timeout) {
    return {
        restrict: 'E',
        scope: {
            target: '='
        },
        link: function (scope, element, attrs) {
            var template = element.html();
            var templateFn = $compile(template);
            var update = function(){
                $timeout(function () {
                    var compiled = templateFn(scope).html();
                    var prettified = prettyPrintOne(compiled);
                    element.html(prettified);
                }, 0);
            }
            scope.$watch('target', function () {
                update();
            }, true);
            update();
        }
    };
}]);

h / t @DanielSchaffer（见Template always compiles with old scope value in directive）。

Answer 3

我想通过@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 4

Angular已经为JSON内置了这个过滤器：

<pre>
  {{data | json}}
</pre>

如果要创建自己的指令，可以直接使用JSON对象：

app.filter('prettyJSON', function () {
    function syntaxHighlight(json) {
      return JSON ? JSON.stringify(json, null, '  ') : 'your browser doesnt support JSON so cant pretty print';
    }
    return syntaxHighlight;
});

使用标记

  <pre>
    {{data | prettyJSON}}
  </pre>

Answer 5

我在这个问题上挣扎了很长一段时间，并希望在这里讨论，虽然比其他人晚得多（但实际上，2017年底谁还在使用AngularJS？这个人。）我具体使用 - 案例是我在页面上动态加载代码（xml）的地方，需要反复打印。

此指令将您的代码作为属性接受，删除运行prettyprinted后立即添加到元素的prettyPrint()类。它将监视来自父级范围的输入代码的更改，并在发生更改时再次运行代码。

只有依赖是你有谷歌的代码美化。我让它自我托管，因此PR.prettyPrint()（按照截至2017年9月的文档中的说明）。

该指令完全封装了动态内容所需的Google代码解决功能。

angular.module('acrSelect.portal.directives')
  .directive('prettyPrint', ['$timeout', function($timeout) {
      return {
        restrict: 'E',
        scope: {
            'code': '=',
        },
        template: '<pre ng-class="{prettyprint: code}">{{ code }}</pre>',
        link: function (scope, element, attr) {
            scope.$watch('code',function(){
                $timeout(function() {
                    //DOM has finished rendering
                    PR.prettyPrint();
                    element.find(".prettyprint").removeClass("prettyprinted");
                });
            });
        }
      }
  }
]);

父模板中的html可能看起来像

<pretty-print code="selectedCode" ng-show="codeIsSelected"></pretty-print>

希望这有助于另一个可怜的灵魂！

AngularJs如何调用prettyprint？

5 个答案: