<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@*" data-semver="1.5.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script>
var myapp = angular.module("myapp", []);
myapp.controller('myController', ['$scope', function($s){
$s.name='asdfasdf';
$s.num = 1;
$s.complex = {name: 'complex', subitem: { name:'nested', value:12 } };
$s.tree = {name:'parent', num:2, children: [
{ name:'p c1', num:2, children: [{name: 'son1', num: 12 }, {name: 'son2', num: 12 }] },
{name:'p c2', num:2, children: [{name: 'pc2s', num: 12 }] },
] };
}]);
myapp.directive('myDirective', function() {
return {
restrict: 'E',
scope: false,
template: '<input type="text" ng-model="name"></input><another-directive data="complex.subitem.name"/>'
};
});
myapp.directive('anotherDirective', function() {
return {
restrict: 'E',
scope: {data:'='},
template: '<h1>data: {{data}}</h1><input style="background-color:green" type="text" ng-model="data"></input>'
}
});
myapp.directive('recursiveDirective', function() {
return {
restrict: 'E',
scope: {data:'='},
template: '<h3>{{data.name}}</h3>'
+ '<div ng-repeat="item1 in data.children">'
+ ' <ul>'
+ ' <recursive-directive ng-if="data.children!=null" data="item1"/>'
+ ' </ul>'
+ '</div>'
};
});
</script>
</head>
<body>
<h1>Hello Plunker!</h1>
<div ng-app='myapp' ng-controller='myController'>
{{complex.subitem.name}}
<recursive-directive data='tree'/>
</div>
</body>
</html>
// Code goes here
/* Styles go here */