<!DOCTYPE html>
<html>
<head>
<script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script data-require="angular.js@1.4.0" data-semver="1.4.0" src="https://code.angularjs.org/1.4.0/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-app="MyApp">
<div ng-controller="MyCtrl">
<h2>ngRepeat Demo</h2>
<ul>
<li ng-repeat="item in items">{{item}}</li>
</ul>
<h2>Custom unorderedList Demo</h2>
<unordered-list data="item in items">
{{item}}
</unordered-list>
</div>
</div>
</body>
</html>
angular.module("MyApp", [])
.directive("unorderedList", function($compile) {
return {
// look for the component element
restrict: "E",
link: function(scope, element, attrs) {
// simple implementation will use ng-repeat in a template
var tpl = "<ul><li ng-repeat='" + element.attr("data") + "'>" + element.html() + "</li></ul>";
// compile the template, link it to a scope
var linkingFn = $compile(tpl);
var domElements = linkingFn(scope);
// replace the component element with the live DOM elements
element.replaceWith(domElements);
}
};
})
.controller("MyCtrl", function($scope) {
$scope.items = ["red","blue","green","orange"]
});
/* Styles go here */