Last active — forked from anonymous/jsbin.EhAnIMaJ.html

Embed URL

HTTPS clone URL

SSH clone URL

You can clone with HTTPS or SSH.

Download Gist

Simple angular directive for polymorphism. Running example: http://jsbin.com/EhAnIMaJ/2/edit

View angular-polymorphism.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
var module = angular.module('test', []);
 
// Simple directive lets you use polymorphism.
module.directive('filter', function() {
return {
scope: {filter: '=filter'},
template: '<div ng-include="filter.url"></div>'
};
});
 
function PageController($scope, $templateCache) {
$scope.message = 'Polymorphism demo';
// Manually fill the $templateCache so there are no http requests made for the
// templates.
$templateCache.put('range.html',
'<div><input ng-model="filter.min"><input ng-model="filter.max"></div>');
$templateCache.put('text.html',
'<div><input ng-model="filter.text"></div>');
// Each object confirms to an interface. In this example, the only
// requirement is that the object has a "url" property.
$scope.filters = [
{url: 'range.html', min: 0, max: 100},
{url: 'text.html', text: 'World'}
];
}
View angular-polymorphism.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14
<!DOCTYPE html>
<html>
<head>
<link href="demo.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<meta charset=utf-8 />
<title>Polymorphism</title>
</head>
<body ng-app="test" ng-controller="PageController">
<h2>{{message}}</h2>
<div class="filter" ng-repeat="filter in filters" filter="filter"></div>
</body>
</html>
View angular-polymorphism.js
1 2 3 4 5
.filter {
border: 1px solid black;
padding: 5px;
margin: 5px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.