This repository was archived by the owner on Apr 12, 2024. It is now read-only.
This repository was archived by the owner on Apr 12, 2024. It is now read-only.
Using custom tag names in directive template doesn't work in IE8 #2751
Description
The following example works perfectly in Chrome but it will not work in IE8; to make it work one should:
- substitute the
<child>node with the equivalent attribute version<span child>, or - use the
templatedirective option instead oftemplateUrl
Is this a feature or a bug?
Thanks for your AWESOME job guys!!!
(I didn't create a jsfiddle because it doesn't seem to support IE8 anymore...)
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script>
<script src="test.js"></script>
</head>
<body>
<div ng-app="customModule">
Hello <span parent></span>!!
</div>
</body>
</html>here's the content of test.js file:
document.createElement('parent');
document.createElement('child');
angular.module("template/parent.html", []).run(["$templateCache", function($templateCache) {
$templateCache.put("template/parent.html",
"<span> - <child ng-repeat='child in children' name='child.name'></child> - </span>"
);
}]);
angular.module("template/child.html", []).run(["$templateCache", function($templateCache) {
$templateCache.put("template/child.html",
"<span>{{name}} </span>"
);
}]);
angular.module('customModule', ["template/parent.html", "template/child.html"])
.directive("parent", function() {
return {
restrict: 'EA',
replace: true,
scope: {},
//template: "<span> - <child ng-repeat='child in children' name='child.name'></child> - </span>",
templateUrl: "template/parent.html",
link: function($scope) {
$scope.children = [
{
name: 'child1'
},
{
name: 'child2'
}
];
}
};
})
.directive("child", function() {
return {
restrict: 'EA',
replace: true,
scope: {
name: '='
},
//template: "<span>{{name}} </span>"
templateUrl: "template/child.html"
};
});