为什么这个角度指令只调用一次

why is this angular directive only invoked once?

本文关键字:一次 调用 指令 为什么      更新时间:2023-09-26

我定义了以下琐碎指令

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,似乎会出现问题,但我不明白为什么。

尝试为指令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>

不能对自定义元素使用自关闭标记。

您的代码与关闭标签配合良好

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

DEMO