jelbourn/angular-polymorphism.js

## angular-polymorphism.js
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'}
  ];
}

## index.html
<!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>

## style.css
.filter {
  border: 1px solid black;
  padding: 5px;
  margin: 5px;
}
	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'}
	];
	}
	<!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>