错误AngularJS指令追加下页(Error appending Pagedown in Angu

在此基础上的问题，但我觉得这保证了自己的问题： 谷歌PageDown键AngularJS指令

以下从这个问题的例子，似乎工作，但我遇到问题时，我尝试将指令添加到页面。

下面是我在逻辑函数的代码：

  scope.editor_id = null;

  if(attrs.id == null) {
    scope.editor_id = nextID++;
  } else {
    scope.editor_id = attrs.id;
  }

  //append editor HTML
  //has to be done here so that it is available to the editor when it is run below
  var editor_html = $compile(
      '<div id="wmd-button-bar-' + scope.editor_id + '"></div>' +
      '<textarea class="wmd-input" id="wmd-input-' + scope.editor_id + '" ng-model="content"></textarea>'
  )(scope);


  element.find('.wmd-panel').append(editor_html);


  var editor = new Markdown.Editor(editor_converter, "-" + scope.editor_id);
  editor.run();

然而，当我追加的其中之一的文档，我得到以下错误：

TypeError: Cannot read property 'attachEvent' of null

这个错误往往会突然出现时， wmd-input中不存在的HTML。 然而，我与将它添加$compile功能，它可以在页面加载，而不是在它被追加。 我在做什么错在这里？

Answer 1:

UPDATE

我能够重现你的问题： http://plnkr.co/edit/R2eDKBreHmYBjPtU0JxD?p=preview

为什么typeError: Cannot read property 'attachEvent' of null ？

• 我错了我以前的假设（复合链接功能做返回的元素）
• 问题是，你使用的方式angular.element#find 。
• angular.element#find只搜索子元素不是整个文件。
• 与DOM元素.wmd-panel类不是当前元素的子元素。

这应该很好地工作：

angular.element('.wmd-panel').append(editor_html);

Answer 2:

试着做这样进行编译：

$compile('template stuff goes here')(scope, function(cloned, scope){
   element.append(cloned); 
});

您可能还需要定义回调函数内你的编辑，因为我不知道这是否是异步与否。 您可能还需要重新考虑让你的指令编制和附加到自己这个样子。 为什么不只是添加使用类似NG重复整个指令的多个实例？

此外，如果你有这样的一个指令内的多个实例，你将失去参考编辑器。 不知道这是怎么回事这个代码之外，所以我真的不能告诉。

文章来源: Error appending Pagedown in AngularJS Directive