Skip to content
Create a gist now

Instantly share code, notes, and snippets.

Simple angular directive for polymorphism. Running example:
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.
'<div><input ng-model="filter.min"><input ng-model="filter.max"></div>');
'<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'}
<!DOCTYPE html>
<link href="demo.css">
<script src=""></script>
<meta charset=utf-8 />
<body ng-app="test" ng-controller="PageController">
<div class="filter" ng-repeat="filter in filters" filter="filter"></div>
.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.