javascript - AngularJS 指令，在元素后插入 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”的位置标记元素，并让它直接在后面插入弹出元素。

我的主要问题是:我想将 el.after() 中的 HTML 字符串分解到它自己的文件中，这样更容易管理。有没有一种好方法可以将 HTML 字符串从另一个文件导入到这样的指令中？

此外 - 可能有一种更好的方法来完成此任务。如果有的话，我洗耳恭听。

仅供引用 - 我正在使用 Semantic UI对于 UI 部分，因此弹出语法是通过他们的框架实现的。

谢谢!

Answer 1

有一种出色的内置方法可以完成您想要做的事情!使用$templateRequest service从服务器位置拉取 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>