角度指令，在元素后插入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和要創建的任何綁定。