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

你知道为什么吗

---

很难说，prettyPrint（）应该返回什么

这似乎很奇怪，你没有给任何参数预打印

顺便说一句，我认为角度滤波器比指令更适合您的需要

[编辑]

这一个正在使用过滤器“动态”工作：

html:

<div ng-app="Knob" ng-controller="myCtrl">
    <!--<input ng-model="text" type="text"/>-->
    <pre ng-bind-html-unsafe="text|pretty"></pre>
</div>

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

你可以在

您可以取消对输入的注释，以直接更改将被预处理的文本

请注意，此版本适用于Angular 1.1.1（您在初始JSFIDLE中选择的版本），对于Angular 1.2。*，您必须使用ng bind html和ngSanitize模块

最后一点：现在它已经被动态预处理，setTimeOut和$scope.$apply可以被删除（读者信息）

---

[/EDIT]

很难说，prettyPrint（）应该返回什么

这似乎很奇怪，你没有给任何参数预打印

顺便说一句，我认为角度滤波器比指令更适合您的需要

[编辑]

这一个正在使用过滤器“动态”工作：

html:

<div ng-app="Knob" ng-controller="myCtrl">
    <!--<input ng-model="text" type="text"/>-->
    <pre ng-bind-html-unsafe="text|pretty"></pre>
</div>

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

你可以在

您可以取消对输入的注释，以直接更改将被预处理的文本

请注意，此版本适用于Angular 1.1.1（您在初始JSFIDLE中选择的版本），对于Angular 1.2。*，您必须使用ng bind html和ngSanitize模块

最后一点：现在它已经被动态预处理，setTimeOut和$scope.$apply可以被删除（读者信息）

---

[/EDIT]

它可以通过一个小指令来实现。在这里找到答案

我想对@carlosmantilla的指令做一点补充

您可以在不创建scope变量的情况下实现相同的功能。我在github上添加了此更正

我想这应该能正常工作

var-App=angular.module（'旋钮'，[]）；
应用程序控制器（'myCtrl'，函数（$scope）{
$scope.text=“函数f1（）{int a；}”；
})
函数替换文本（str）
{
var str1=字符串（str）；
返回str1。替换（/\n/g，“
”）；
}
app.directive（'prettyprint'，function（）{
返回{
限制：“C”，
链接：函数postLink（范围、元素、属性）{
html（prettyPrintOne（replaceText（element.html（）），“”，true））；
}
};
});

它可以通过一个小指令来实现。在这里找到答案

我想对@carlosmantilla的指令做一点补充

您可以在不创建scope变量的情况下实现相同的功能。我在github上添加了此更正

我想这应该能正常工作

var-App=angular.module（'旋钮'，[]）；
应用程序控制器（'myCtrl'，函数（$scope）{
$scope.text=“函数f1（）{int a；}”；
})
函数替换文本（str）
{
var str1=字符串（str）；
返回str1。替换（/\n/g，“
”）；
}
app.directive（'prettyprint'，function（）{
返回{
限制：“C”，
链接：函数postLink（范围、元素、属性）{
html（prettyPrintOne（replaceText（element.html（）），“”，true））；
}
};
});

这是一个迟到的回复，我确信你已经解决了这个问题。然而，可能还有其他一些人遇到了同样的问题。我使用google code prettify的改编版本解决了这个问题，可以在这里找到： 只需按照该页上的说明操作即可

现在，可以全局调用prettifyPrint（）

(function(){
    $('pre').addClass('prettyprint');
    prettyPrint();
})();

---

我把它放在我的动态模板的底部，这是一个迟来的回复，我确信你已经解决了这个问题。然而，可能还有其他一些人遇到了同样的问题。我使用google code prettify的改编版本解决了这个问题，可以在这里找到： 只需按照该页上的说明操作即可

现在，可以全局调用prettifyPrint（）

(function(){
    $('pre').addClass('prettyprint');
    prettyPrint();
})();

---

我把它放在我的动态模板的底部。它正在等待

$viewContentLoaded

，以确保其中的模板变量（

{{}}

）已由angular计算。应在我的指令中使用。它正在等待

$viewContentLoaded

，以确保其中的模板变量（

{{}}

）已由angular计算。应在

中使用。请尝试使用ng bind html

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

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


app.directive（'prettyprint'，function（）{
返回{
限制：“C”，
链接：函数postLink（范围、元素、属性）{
html（prettyPrintOne（element.html（），“”，true））；
}
};
});
请尝试使用ng bind html

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


app.directive（'prettyprint'，function（）{
返回{
限制：“C”，
链接：函数postLink（范围、元素、属性）{
html（prettyPrintOne（element.html（），“”，true））；
}
};
});
我不知道为什么，但我发现如果您延迟300毫秒执行
prettyprint
功能，效果会很好。见下文：

我不知道为什么，但我发现如果执行
prettyprint
函数延迟300毫秒，效果会很好。见下文：

prettyPrint是Google代码Prettify的一部分好吧，IMHO，你的指令没用，只要删除它就行了（prettyPrint代码）。据我所见，prettyPrint的目的是在事件回调中调用，但link函数不是事件回调，所以在这种情况下，Google Prettypier只是做了一些混乱…它不起作用-它应用了类，是的，但没有正确地为实际代码的语法着色。我在JSFIDLE中使用了“int function（inti，intj）；”作为文本中的代码，并且有一些颜色（在删除指令后）。此外，您正在创建一个与GooglePrettifier t已经使用的类同名的指令