Angular Directive, Insert HTML after element

Question

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!

Answer 1

我对您的建议是将其包装成一个指令，该指令还包括人员（使用ng-if）和主要元素，然后您可以使用控制器更改任何有效的方法以表明您将负责所有信息那正在发生

Answer 2

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>

Answer 3

I recommend one directive with a template which has both the anchor and the div content:

app.directive('actor', function() {
   return {
      restrict: 'E',
      scope: { person: '=' },
      templateUrl: 'person.html'
   }
});

Person.html

<a class="user">{{person.actor.name}}</a>
<div class="ui special popup">
    <div class="ui header"> 
       {{ person.actor.age }}
     </div>
 </div>");

Usage

<actor person="famousPerson"></actor>

This arrangement allows you to have full control over the HTML with access to person and any bindings you want to create.