javascript - 为什么这个 Angular Directive(指令)只被调用一次？

Question

我定义了以下简单指令

angular.module('my-app').directive('formPanel', function () {

    return {
      restrict: 'EA',
      scope: {
        forms: "=",
        title: "@",
        formSelect: "&"
      },
      templateUrl: 'formPanel.html'
    };
  }
);

formPanel.html 模板的内容是:

<h1>foo</h1>

如果我像这样调用该指令 3 次:

<form-panel title="title" forms="entitledApplications" 
    form-select="goToFormDetails(selectedForm)"/>

<form-panel title="title" forms="maybeEntitledApplications" 
    form-select="goToFormDetails(selectedForm)"/>

<form-panel title="title" forms="applications" 
    form-select="goToFormDetails(selectedForm)"/>

呈现以下输出

<h1>foo</h1>

但我期待以下内容

<h1>foo</h1>
<h1>foo</h1>
<h1>foo</h1>

如果传递给 forms 范围属性的列表为空/null，似乎会出现问题，但我不明白为什么。

Answer 1

尝试为您的指令 HTML 元素使用结束标记:

<form-panel title="title" forms="entitledApplications" 
   form-select="goToFormDetails(selectedForm)"></form-panel>

<form-panel title="title" forms="maybeEntitledApplications" 
   form-select="goToFormDetails(selectedForm)"></form-panel>

<form-panel title="title" forms="applications" 
   form-select="goToFormDetails(selectedForm)"></form-panel>