在AngularJS中動態調用prettyPrint（）廢墟綁定

我試圖對一些動態生成的文本進行優化。在AngularJS中動態調用prettyPrint（）廢墟綁定

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

來源

2014-01-13 Snowman

很難說，這是什麼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/

您可以取消輸入直接更改將prettyfied

請注意，這個版本是1.1.1角（你在最初的jsfiddle選用的版本）的文本，對於Angular 1.2。*，你必須使用ng-bind-html和ngSanitize模塊

最後一點：現在它動態很漂亮了，setTimeOut和$ scope。$ apply可以被移除（info for re aders）

來源

2014-01-13 00:24:43

漂亮的照片是谷歌代碼美化的一部分http://google-code-prettify.googlecode.com/svn/trunk/README.html – Snowman

好吧，恕我直言，你的指令是沒用的，只是刪除它工作（漂亮的打印代碼）。 –

據我所知，prettyPrint的目的是在事件回調中調用，但鏈接函數不是事件回調，所以在這種情況下，Google漂亮只是做一些混亂... –

它可以通過一個小指令來實現。在這裏找到答案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)); 
     } 
    }; 
});

來源

2014-03-19 17:19:15 Deepak

你好。如果您需要鏈接到資源以提供答案，請在您的帖子中包含文章/網站/答案的摘要，以防將來鏈接中斷。 – JasonMArcher

這是一個遲到的答覆和IM確保你已經解決了這個問題。然而，也可能有其他人在同一個問題上陷入這條線索。我解決了這個問題，使用和修改版本的谷歌代碼美化，可以在這裏找到：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-11 15:14:28

我的指令的底部。它正在等待$viewContentLoaded以確保其中的模板var（{{}}）已經按角度計算。應該用在一個<pre>

.directive('prettyprint', function() { 
    return { 
    restrict: 'C', 
    link: function postLink(scope, element) { 
     scope.$on('$viewContentLoaded', function(){ 
     element.html(prettyPrintOne(element.html(),'',true)); 
     }); 
    } 
    }; 
});

來源

2014-10-27 10:08:03 Clem

請嘗試使用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-18 17:56:20 Tropicalista

我不知道爲什麼，但我覺得，如果你延遲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-23 01:19:21

在AngularJS中動態調用prettyPrint（）廢墟綁定

回答

相關問題