1

Based on this question, though I felt this warranted its own question: Google pagedown AngularJS directive

Following the example from this question, it seems to work, however I am running into issues when I try to append a directive to the page.

Here is the code I have in the linking function:

  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();

However, when I append one of these to the document, I get the following error: 

TypeError: Cannot read property 'attachEvent' of null

This error tends to crop up when the wmd-input is not present in the HTML. however, I am adding it with the $compile function, and it works on page load, but not when it is appended. What am I doing wrong here?

Community
  • 1
  • 1
GSto
  • 41,512
  • 37
  • 133
  • 184

2 Answers2

4

UPDATE

I was able to reproduce your problem: http://plnkr.co/edit/R2eDKBreHmYBjPtU0JxD?p=preview

Why typeError: Cannot read property 'attachEvent' of null?

  • I was wrong with my previous assumption ( the composite linking function do returns the element)
  • The problem is with the way you use angular.element#find.
  • angular.element#find only search for child elements not on the whole document.
  • the DOM element with a .wmd-panel class is not a child of the current element.

This should work fine:

angular.element('.wmd-panel').append(editor_html);
Ilan Frumer
  • 32,059
  • 8
  • 70
  • 84
  • 1
    I'd like only to note that you need to be careful when adding node not to the child element - if the directive's parent node/scope will be destroyed (with ng-if or by routing) this `editor_html` will not and will keep the link to the directive's scope. That may lead to memory leaks. – GRaAL Jan 27 '14 at 21:41
  • @GRaAL you are correct. I only answered the OP why the error occurs and how to fix it. It also feels "non angular" to use selectors on the document like that. I bet there is more angular way to achieve what he needs but the question doesn't provide much details. – Ilan Frumer Jan 27 '14 at 22:48
0

Try doing compile like this:

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

You may also have to define your editor inside the callback function because I'm not sure if it's asynchronous or not. You may also want to re-consider having your directive compile and append to itself like this. Why not just add more instances of the entire directive using something like ng-repeat?

Also, if you have multiple instances inside this one directive, you will lose reference to editor. Not sure what's going on outside this code so I can't really tell.

Jonathan Rowny
  • 7,588
  • 1
  • 18
  • 26