title: AngularJS Directive, Insert HTML after element
body: <p>In the app I'm working on, people's names are mentioned throughout the app. I want to be able to show a contact card on click for any person that shows up - basically a little popout with their contact information.</p>
  
  <p>I'm using Angular for this, and have cobbled this together using a directive. The HTML looks like this:</p>
  
  <pre><code>&lt;a class="user" ng-person person="{{event.actor}}"&gt;{{event.actor}}&lt;/a&gt;
  </code></pre>
  
  <p>And, I've got a directive that looks like this:</p>
  
  <pre><code>angular.module('myApp').directive('person', function($timeout){
    var link = function(scope, el, attr){
      var person = attr.person;
      $timeout(function(){
        $(el).popup();
      }, 0);
      el.after("&lt;div class='ui special popup'&gt;&lt;div class='ui header'&gt;"+person+"&lt;/div&gt;&lt;/div&gt;");
    }
  
    return {
      link: link
    }
  
  });
  </code></pre>
  
  <p>Basically, what I'm doing here is using the directive to be able to tag elements where I want this to show up with 'ng-person', and have it insert the popup element directly after.</p>
  
  <p>My main question is this: I'd like to break that string of HTML in the <code>el.after()</code> out into its own file, so it's easier to manage. Is there a good way to import an HTML string from another file into a directive like this?</p>
  
  <p>Also - there may be a totally better way to do this altogether. If there is, I'm all ears.</p>
  
  <p>FYI - I'm using <a href="http://semantic-ui.com/modules/popup.html#/definition" rel="nofollow">Semantic UI</a> for the UI portion of things, so the popup syntax is via their framework. </p>
  
  <p>Thanks!</p>