AngularJS Directive, Insert HTML after element

Issue

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.

I'm using Angular for this, and have cobbled this together using a directive. The HTML looks like this:

<a class="user" ng-person person="{{event.actor}}">{{event.actor}}</a>

And, I've got a directive that looks like this:

angular.module('myApp').directive('person', function($timeout){
  var link = function(scope, el, attr){
    var person = attr.person;
    $timeout(function(){
      $(el).popup();
    }, 0);
    el.after("<div class='ui special popup'><div class='ui header'>"+person+"</div></div>");
  }

  return {
    link: link
  }

});

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.

My main question is this: I'd like to break that string of HTML in the el.after() 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?

Also - there may be a totally better way to do this altogether. If there is, I'm all ears.

FYI - I'm using Semantic UI for the UI portion of things, so the popup syntax is via their framework.

Thanks!

Solution

There is an excellent built-in way to do what you're trying to do! Use the $templateRequest service to pull down your HTML file from its server location. This is really handy because Angular will then cache this HTML, pulling it from cache instead of the server whenever you request it in the future!

However, if you're wanting to really do things the Angular way, it may make more sense to do something like this:

angular
  .module('app')
  // I recommend against something like 'ngPerson' since
  // ng prefix is usually used for Angular built-in directives
  .directive('abcPersonCard', function() {
    return {
      restrict: 'E',
      scope: {
        person: '='
      },
      templateUrl: '/partials/abcPersonCard.html',
      // link, controller, etc.
    };
  }

Then in your template...

/partials/abcPersonCard.html

<a class="user">{{person}}</a>
<div class="card">
  <!-- card stuff -->
</div>

And then you would use it like this instead of the regular link anywhere you want a card:

<abc-person-card person="event.actor"></abc-person-card>

Answered By - SethGunnells