1

基于这个问题，虽然我觉得这有必要提出自己的问题：Google pagedown AngularJS directive

按照this question中的示例，它似乎有效，但是当我尝试将指令附加到页面时遇到问题。

这是我在链接函数中的代码：

  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函数一起添加，它在页面加载时有效，但在附加时无效。我在这里做错了什么？

4

2 回答 2

4

更新

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

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

  • 我之前的假设错了（复合链接函数确实返回了元素）
  • 问题在于您使用angular.element#find.
  • angular.element#find仅搜索不在整个文档上的子元素。
  • 具有.wmd-panel类的 DOM 元素不是当前元素的子元素。

这应该可以正常工作：

angular.element('.wmd-panel').append(editor_html);
于 2014-01-27T18:07:58.477 回答
0

尝试像这样编译：

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

您可能还必须在回调函数中定义您的编辑器，因为我不确定它是否是异步的。您可能还想重新考虑让您的指令像这样编译并附加到自身。为什么不使用 ng-repeat 之类的方法添加整个指令的更多实例？

此外，如果您在这个指令中有多个实例，您将失去对编辑器的引用。不知道这段代码之外发生了什么，所以我真的说不出来。

于 2014-01-27T18:00:05.840 回答