AngularJS指令，在元素后插入HTML

AngularJS Directive, Insert HTML after element

本文关键字：插入 HTML 元素 指令 AngularJS      更新时间：2023-09-26

在我正在开发的应用程序中，整个应用程序中都会提到人名。我希望能够在点击时为任何出现的人显示联系人卡——基本上是一个弹出的联系人信息。

我使用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的UI部分，所以弹出语法是通过他们的框架。

谢谢！

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

我给您的建议是将其封装到一个指令中，该指令还包括person（带ng-if）和main元素然后，你可以使用控制器来更改任何工作以显示该信息你将负责正在发生的一切

我建议使用一个同时具有锚点和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>

这种安排允许您通过访问person和要创建的任何绑定来完全控制HTML。

相关文章：