3

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

但不能让它工作。我创建了一个简单的指令并调用方法 prettyPrint()，但代码没有格式化。

小提琴：http : //jsfiddle.net/Tropicalista/yAv4f/2/

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

5 回答 5

6

我修改了你的代码，我会在这里更新：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 文本中执行它。

为了简化指令的使用，比如美化风格，我建议将 retric 设置为“C”类并将指令名称更改为“prettyprint”

于 2013-09-22T12:00:33.553 回答
6

我已经扩展了以前的答案，并创建了一个带有工作指令的 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（请参阅模板始终使用指令中的旧范围值进行编译）。

于 2014-12-16T22:08:14.307 回答
1

我想对@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));
        }
    };
});
于 2014-03-19T17:16:04.243 回答
1

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>
于 2015-04-12T07:16:31.853 回答
0

我在这个问题上苦苦挣扎了很长一段时间，并想在这里插话，尽管比其他人晚得多（但实际上，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>

希望这可以帮助另一个可怜的灵魂！

于 2017-09-06T00:29:37.283 回答