CODEWITHSUNDEEP
angularjsdirective
David Whitten
David Whitten

Reputation: 573

Angular Directive Element issue

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?

Upvotes: 1

Views: 80

Answers (1)

harishr
harishr

Reputation: 18055

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>

Upvotes: 1

Related Questions