Last active
January 3, 2016 14:39
-
-
Save intere/8477771 to your computer and use it in GitHub Desktop.
Demonstration that Comment Based Directives get skipped if they are in the <head> section.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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