Skip to content

Instantly share code, notes, and snippets.

@intere
Last active January 3, 2016 14:39
Embed
What would you like to do?
Demonstration that Comment Based Directives get skipped if they are in the <head> section.
<!doctype html>
<html>
<head>
<!-- directive: head-comment-directive -->
<element-directive></element-directive>
</head>
<body ng-app="angularHeadApp">
<!-- directive: body-comment-directive -->
Head Comment Parent Node: {{headCommentParentName}}<br />
Body Comment Parent Node: {{bodyCommentParentName}}<br />
Element Parent Node: {{elementParentName}}
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.js"></script>
<script>
angular.module('angularHeadApp', [])
.directive('headCommentDirective', function ($log) {
return {
restrict: 'M',
link: function postLink(scope, element, attrs) {
$log.info("I'm in the head comment directive");
//
// Report back on what the parent element name is:
//
if(element && element[0] && element[0].parentElement) {
scope.headCommentParentName = element[0].parentElement.nodeName.toLowerCase();
}
}
};
})
.directive('bodyCommentDirective', function ($log) {
return {
restrict: 'M',
link: function postLink(scope, element, attrs) {
$log.info("I'm in the body comment directive");
//
// Report back on what the parent element name is:
//
if(element && element[0] && element[0].parentElement) {
scope.bodyCommentParentName = element[0].parentElement.nodeName.toLowerCase();
}
}
};
})
.directive('elementDirective', function($log) {
return {
restrict: 'E',
link: function(scope, element, attrs) {
$log.info("I'm in the element directive");
//
// Report back on what the parent element name is:
//
if(element && element[0] && element[0].parentElement) {
scope.elementParentName = element[0].parentElement.nodeName.toLowerCase();
}
}
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment