调用prettyPrint（）动态地AngularJS废墟结合 [英] Calling prettyPrint() dynamically in AngularJS ruins binding

问题描述

我想prettify动态生成一些文本。

I'm trying to prettify some text that is generated dynamically.

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

任何想法，为什么？

Any ideas why?

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

推荐答案

它可以通过一个小的指令来实现的。这里<一个找到答案href=\"http://stackoverflow.com/questions/18942607/angularjs-how-to-call-$p$pttyprint/22513369#22513369\">AngularJs如何调用prettyprint？

It can be achieved by a small directive. Find the answer here AngularJs how to call prettyprint?

我想作一个小的除了通过指令@carlosmantilla

I would like to make a small addition to the directive by @carlosmantilla

您也可以达到同样的事情，而无需创建范围的变量。我加入这个修正在github

You can achieve the same thing without creating the scope variable. I have added this correction on github

这应该正常工作我承担。

This should work properly I assume.

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

这篇关于调用prettyPrint（）动态地AngularJS废墟结合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！