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 scope属性的列表为空/ 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>

Answer 2

您不能将自关闭标记用于自定义元素。

您的代码可以正常使用结束标记

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

的 DEMO

为什么这个angular指令只调用一次？

2 个答案: