Skip to content

Instantly share code, notes, and snippets.

@petebacondarwin
Last active Oct 12, 2015
Embed
What would you like to do?
ngUpgrade vanilla Angular 1 example
<!doctype html>
<html>
<title>Angular Upgrade 1.0</title>
<style>
user {
background-color: lightyellow;
border: 2px solid darkorange;
display: inline-block;
width: 150px;
padding: 1em;
}
.border {
border: solid 2px DodgerBlue;
}
.title {
background-color: LightSkyBlue;
padding: .2em 1em;
font-size: 1.2em;
}
.content {
padding: 1em;
}
</style>
<body ng-app="app" ng-controller="Index" >
<upgrade-app user="person.name" onreset="person.name=''">
Your name: <input ng-model="person.name">
<hr>
Greetings from {{person.name}}!
</upgrade-app>
<script src="https://code.angularjs.org/snapshot/angular.js"></script>
<script src="index.js"></script>
</body>
</html>
angular.module('app', [])
.controller('Index', function($scope) {
$scope.person = {
name: 'World'
};
})
.directive('user', function() {
return {
restrict: 'E',
scope: {
handle: '@',
reset: '&'
},
template:
'User: {{handle}}' +
'<hr>' +
'<button ng-click="reset(this)">clear</button>'
};
})
.directive('upgradeApp', function() {
return {
restrict: 'E',
template:
'<div class="border">' +
' <pane title="Title: {{user}}">' +
' <table cellpadding="3">' +
' <tr>' +
' <td><ng-transclude></ng-transclude></td>' +
' <td>{{user}}</td>' +
' <td><user handle="{{user}}" reset="reset(this)"></user></td>' +
' </tr>' +
' </table>' +
' </pane>' +
'</div>',
transclude: true,
scope: {
user: '=',
reset: '&'
}
};
})
.directive('pane', function() {
return {
restrict: 'E',
template:
'<div class="border">' +
' <div class="title">{{title}}</div>' +
' <div class="content"><ng-transclude></ng-transclude></div>' +
'</div>',
transclude: true,
scope: {
title: '@'
}
};
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment