dom - 将非字符串属性传递给 $compile 函数

Question

我制作了一个 html-renderer 指令，它接受一个字符串并将其转换为 html 元素：

.directive('htmlRenderer', function($compile) {
  var linker = function(scope, element, attrs) {
    scope.$watch('template', function() {
      element.html(scope.template);
      $compile(element.contents())(scope);
      console.log("Template", scope.template);
    });
  };

  return {
    restrict: 'E',
    replace: true,
    link: linker,
    scope: {
      template: '@'
    }
  };
});

我的问题是在将对象作为属性传递时出现“DOM Exception 5”：

<html-rendered template='<foo x-data={{ neededData }}/>'/>

在我的控制器中，我有：

function Controller($scope) {
  $scope.neededData = { text: 'Foo needs this for something' };
}

这是它的一个小提琴：http: //jsfiddle.net/9U7CJ/2/

我遇到了这个问题：Getting INVALID_CHARACTER_ERR: DOM Exception 5 这几乎意味着我做错了什么。可悲的是，我对 DOM 了解不多，所以我几乎被困住了。

我已经阅读并重新阅读了有关 $compile 和链接/编译功能的 Angular 文档，但对我来说并没有更清楚。提前致谢！:)