why is this angular directive only invoked once?

Question

I've defined the following trivial directive

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

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

the contents of the formPanel.html template are:

<h1>foo</h1>

If I invoke the directive 3 times like so:

<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)"/>

The following output is rendered

<h1>foo</h1>

But I was expecting the following

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

It seems that the problem occurs if the list passed to the forms scope attribute is empty/null, but I don't understand why.

What browser are you using?

Cerbrus
– Cerbrus

2015-11-09 12:27:43 +00:00
Commented Nov 9, 2015 at 12:27 — Cerbrus
– Cerbrus, Commented Nov 9, 2015 at 12:27

Alex Pollan · Accepted Answer · 2015-11-09 12:34:52Z

2

Try using closing tags for your directive HTML element:

<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>

answered Nov 9, 2015 at 12:34

Alex Pollan

8735 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

charlietfl · Accepted Answer · 2015-11-09 12:37:43Z

1

You can't use self closing tags for custom elements.

Your code works fine with closing tags

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

DEMO

answered Nov 9, 2015 at 12:37

charlietfl

172k14 gold badges125 silver badges154 bronze badges

1 Comment

ivanhoe Over a year ago

Thanks, this fixed it

Collectives™ on Stack Overflow

why is this angular directive only invoked once?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related