角度指令，在元素后插入HTML

Question

在我正在使用的应用程序中，整个应用程序都提到了人们的名字。 我希望能够为出现的任何人单击显示联系卡-基本上是一个弹出窗口，显示了他们的联系信息。

我为此使用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元素。

我的主要问题是：我想将el.after()的HTML字符串分解成自己的文件，因此更易于管理。 有没有什么好办法可以将HTML字符串从另一个文件导入这样的指令？

另外-可能有一种完全更好的方法可以完全做到这一点。 如果有，我全神贯注。

仅供参考-我将语义UI用于事物的UI部分，因此弹出式语法是通过其框架实现的。

谢谢！

Answer 1

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

Answer 2

有一种出色的内置方法可以完成您想做的事情！ 使用$templateRequest服务从其服务器位置下拉HTML文件。 这真的很方便，因为Angular随后将缓存此HTML，并在以后您每次请求时从缓存而不是服务器中将其提取！

但是，如果您真的想以Angular的方式进行操作，那么执行以下操作可能更有意义：

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

然后在您的模板中...

/partials/abcPersonCard.html

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

然后，您可以像这样使用它，而不是在想要卡片的任何地方使用常规链接：

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

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和要创建的任何绑定。