Angular Directive Element issue

Question

I have a directive in some html something really simple as in:

Date Picker<br/>
<div date-picker-extender></div><p></p>
Hello, David!!!

The directive itself is a quick sample so it looks like this:

app.directive('datePickerExtender', function () {
  return {
     restrict: 'A',
     replace: true,
     template: '<input size="12" type="text" ng-click="showDatePicker()" />',
     controller: function ($scope) {
        $scope.showDatePicker = function () {
            $scope.$root.$broadcast('onShowDatePicker', {});
        };
     }
  }
});

The oddest thing is that if I change the restrict to 'E', nothing below the directive in the markup shows up so I don't even the text 'Hello, David!!!'. Of course, changing the restrict to 'E", I change the markup to this:

<date-picker-extender />.

Can't figure out what the heck is going on.

Ideas?

can you try changing it to <date-picker-extender></date-picker-extender>. — harishr
– harishr, Commented Aug 3, 2014 at 6:13
Do you get similar results if you do what I did? I've seen so many examples where we shouldn't have to do this. Thanks for your answer though. — David Whitten
– David Whitten, Commented Aug 3, 2014 at 6:22
There's a good discussion here of why Angular can't really do this: github.com/angular/angular.js/issues/1953 — Mark
– Mark, Commented Aug 3, 2014 at 6:24
Okidoke. Very nice article. Thanks much for the information. — David Whitten
– David Whitten, Commented Aug 3, 2014 at 6:39

harishr · Accepted Answer · 2014-08-03 06:33:57Z

1

angularjs directives doesnt work with self closing tags: <date-picker-extender />

please checkout this link for more details.

please use syntax: <date-picker-extender></date-picker-extender>

answered Aug 3, 2014 at 6:33

harishr

18.1k9 gold badges84 silver badges131 bronze badges

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

Collectives™ on Stack Overflow

Angular Directive Element issue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related