Skip to content

Instantly share code, notes, and snippets.

@johnlindquist
Last active August 29, 2015 14:21
Show Gist options
  • Save johnlindquist/f6d8b08c17f61e2aed22 to your computer and use it in GitHub Desktop.
Save johnlindquist/f6d8b08c17f61e2aed22 to your computer and use it in GitHub Desktop.
<!doctype html>
<html lang="en" ng-app="workshop">
<head>
<meta charset="UTF-8">
<title>AngularJS Jumpstart</title>
<link rel="stylesheet" href="bootstrap.min.css"/>
<script src="angular.js"></script>
<script src="workshop.js"></script>
</head>
<body ng-controller="BodyController as body">
<workshop close="body.shutdown()" duration="10" settings="body.settings">
<h1>AngularJS Jumpstart</h1>
</workshop>
</body>
</html>
<div>
<ng-transclude></ng-transclude>
<h2>{{workshop.welcomeMessage}}</h2>
<h3>Location: {{workshop.settings.location}}</h3>
<h3>Language: {{workshop.settings.language}}</h3>
<h3>Size: {{workshop.settings.size}}</h3>
<button ng-click="workshop.close()">Close Workshop</button>
</div>
angular.module("workshop", [])
.controller("BodyController", function(){
var body = this;
body.settings = {
size: 30,
location: "Copenhagen",
language: "English"
}
body.shutdown = function(){
alert("Goodbye!");
}
})
.directive("workshop", function () {
return {
templateUrl: "workshop.html",
controller: "WorkshopController as workshop",
transclude: true,
bindToController: true,
scope: {
duration: "@",
settings: "=",
close: "&"
}
}
})
.controller("WorkshopController", function () {
var workshop = this;
workshop.welcomeMessage =
"Hi there, I hope you're ready for "
+ workshop.duration + " hours of class!";
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment