在指令中使用 $compile 会触发 AngularJS 无限摘要错误

关于为什么该指令会触发无限摘要错误有什么想法吗？

http://jsfiddle.net/smithkl42/cwrgLd0L/13/ http://jsfiddle.net/smithkl42/cwrgLd0L/13/

var App = angular.module('prettifyTest', []);
App.controller('myCtrl', function ($scope) {
    $scope.message = 'Hello, world!';
})

App.directive('prettify', ['$compile', function ($compile) {
    var template;
    return {
        restrict: 'E',
        link: function (scope, element, attrs) {
            if (!template) {
                template = element.html();
            }
            scope.$watch(function () {
                var compiled = $compile(template)(scope);
                element.html('');
                element.append(compiled);
                var html = element.html();
                var prettified = prettyPrintOne(html);
                element.html(prettified);
            });
        }
    };
}]);

这似乎是该行的第一行scope.$watch()触发模型更新的函数，因为当我删除该行时，它不会触发错误。

var compiled = $compile(template)(scope);

我有点困惑为什么该行会触发另一个 $digest - 它似乎没有直接更新任何内容scope.

有没有更好的方法来完成我想要做的事情，例如，使用其他方法来检查范围中的键值是否实际上已更改，以便我可以重新编译模板？ （有没有更好的方法来获取模板？）

当你使用scope.$watch()只需一个函数而没有监视表达式，它会注册一个在每个摘要周期触发的监视程序。既然你打电话来了$compile在该观察程序中，每次都会有效地触发另一个摘要周期，因为它需要处理由模板创建的观察程序。这有效地创建了您的无限消化循环。

要使用相同的代码，您可能应该只在 postLink 函数中编译一次，但我认为您甚至不需要这样做 - 您应该能够只使用template财产。那么你的$watch()语句应包含一个针对您想要监视更改的属性的表达式 - 在本例中，只需'message'，并相应地更新 HTML。