1

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

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

4

6 回答 6

3

它可以通过一个小指令来实现。在这里找到答案AngularJs 如何调用 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));
        }
    };
});
于 2014-03-19T17:19:15.600 回答
1

这是一个迟到的回复，我确定你已经解决了这个问题。但是，可能还有其他一些人在遇到相同问题时偶然发现了此线程。我使用和改编版的 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();
})();

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

于 2014-07-11T15:14:28.820 回答
0

请尝试使用 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));
        }
    };
});
于 2014-12-18T17:56:20.533 回答
0

很难说， 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 可以删除（读者信息）

[/编辑]

于 2014-01-13T00:24:43.120 回答
0

我的指示。它正在等待$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));
      });
    }
  };
});
于 2014-10-27T10:08:03.693 回答
0

我不知道为什么，但我发现如果你延迟 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);
        }
    };
});
于 2016-02-23T01:19:21.460 回答