title: Creating custom angular directive for term.js
body: <p>I am creating a custom directive for my own use, specifically <a href="https://github.com/chjj/term.js/" rel="nofollow">term.js</a>. It is normally very simple to use:</p>
  
  <pre><code>var term = new Terminal({
     cols: 80,
     rows: 24,
     screenKeys: true
  });
  
  term.open(document.body);
  term.write('\x1b[31mWelcome to term.js!\x1b[m\r\n');
  </code></pre>
  
  <p>To do so, I modified a hello-world directive example to suit my needs:</p>
  
  <pre><code>app.directive('terminal', function() {
      return {
          restrict: 'E',
          scope: {
              name: '@'
          },
          template: '&lt;span&gt;Hello {{name}}&lt;div class="term"&gt;&lt;/div&gt;&lt;/span&gt;',
          link: function(scope, elem, attrs) {
              var term = new Terminal({
                  cols: 80,
                  rows: 24,
                  screenKeys: true
              });
              // window.w = elem;
              term.open(elem.find("div"));
              term.write('\x1b[31mWelcome to term.js!\x1b[m\r\n');
          }
      }
  });
  </code></pre>
  
  <p>And I use it in my HTML as:</p>
  
  <pre><code>&lt;terminal name="Terminal 1"&gt;&lt;/terminal&gt;
  </code></pre>
  
  <p>However, although I see "Hello Terminal 1" on web page, the folllowing error is shown in the console:</p>
  
  <pre><code>TypeError: Cannot read property 'defaultView' of undefined
      at Terminal.open (http://localhost:4000/js/term.js:700:43)
      at link (http://localhost:4000/js/MyApp.js:23:18)
  </code></pre>
  
  <p>I am fairly new to AngularJS, cannot figure out what is wrong. elem.find() seems to return a DOM object, there is no .get() method like in JQuery, but it does not matter I have tried it with JQquery too, (instead of jqLite). So what is the problem I cannot see?</p>