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

Question

关于此指令为何触发无限摘要错误的任何想法？

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 中的任何内容。

有没有更好的方法来完成我正在尝试做的事情，例如，一些其他方法来检查作用域中的键值是否真的发生了变化，以便我可以重新编译模板？ (有没有更好的抓取模板的方法？)

Answer 1

当您使用 scope.$watch() 时只有一个函数而没有 watch 表达式，它会注册一个在每个摘要周期都会触发的观察器。由于您在该观察器中调用 $compile，因此每次都有效地触发另一个摘要循环，因为它需要处理由您的模板创建的观察器。这有效地创建了您的无限摘要循环。

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