Угловая директива, Вставить HTML после элемента

Question

В приложении, над которым я работаю, имена людей упоминаются во всем приложении. Я хочу показать контактную карточку по клику для любого человека, который появляется - в основном, небольшой popout с их контактной информацией.

Я использую Angular для этого и объединил это вместе с помощью директивы. HTML выглядит следующим образом:

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

И я получил директиву, которая выглядит следующим образом:

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 
    } 

}); 

В принципе, то, что я делаю здесь, используя директиву, чтобы иметь возможность помечать элементы, где я хочу, чтобы это отображалось с «ng-person», и сразу же вставляйте элемент popup.

Мой главный вопрос: я хотел бы разбить эту строку HTML в el.after() в свой собственный файл, так что управлять ею проще. Есть ли хороший способ импортировать HTML-строку из другого файла в такую ​​директиву?

Также может быть совершенно лучший способ сделать это в целом. Если есть, я все уши.

FYI - Я использую Semantic UI для части пользовательского интерфейса, поэтому синтаксис всплывающих окон через их структуру.

Спасибо!

Answer 1

Существует отличный встроенный способ сделать то, что вы пытаетесь сделать! Используйте файл $templateRequest service, чтобы вытащить ваш HTML-файл из его местоположения на сервере. Это действительно удобно, потому что Angular будет кэшировать этот HTML-код, вытаскивая его из кеша вместо сервера, когда вы его запрашиваете в будущем!

Однако, если Вы желаете, чтобы действительно сделать вещи Угловая путь, он может иметь больше смысла делать что-то вроде этого:

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. 
    }; 
    } 

Затем в шаблоне ...

/партиалы /abcPersonCard.html

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

И тогда вы бы использовать его как это вместо обычной ссылки в любом месте вы хотите карту:

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

Answer 2

Мое предложение к вам было бы обернуть это в директиву, который включает в себя также лицо (с нг-если) и основным элементом можно затем использовать контроллер, чтобы изменить то, что работает, чтобы показать, что данные вы» будет отвечать за все, что происходит

Answer 3

Я рекомендую одну директиву с шаблоном, который имеет как якорь и содержание Div:

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

Использование

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

Такое расположение позволяет иметь полный контроль над HTML с доступом к person и любых привязок, которые вы хотите создать.