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
  }

});

基本上，我在这里所做的就是使用该指令来标记我希望它与＆＃39; ng-person＆＃39;一起显示的元素，并让它直接插入popup元素后。

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

此外 - 可能有一种完全更好的方式来完成这项工作。如果有，我全都是耳朵。

仅供参考 - 我使用Semantic UI作为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>

然后你可以像这样使用它，而不是你想要卡片的常规链接：

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

Angular Directive，在元素之后插入HTML

3 个答案: