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 字符串导入到这样的指令中？

另外 - 可能有一个完全更好的方法来完成这项工作。有的话我洗耳恭听

仅供参考 - 我在 UI 部分使用 Semantic UI，因此弹出语法是通过它们的框架实现的。

谢谢！

Answer 1

我对你的建议是将其包装到一个指令中，该指令还包括人（使用 ng-if ）和主要元素然后您可以使用控制器更改任何有效的信息以显示该信息你将负责所有发生的事情

Answer 2

有一种出色的内置方法可以完成您想要做的事情！使用 $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>

然后你可以像这样使用它而不是常规的 link 任何你想要卡片的地方：

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

AngularJS 指令，在元素后插入 HTML

AngularJS Directive, Insert HTML after element

javascript

angularjs

semantic-ui