Angular:

http://angularjs.org/

HTML

<!-- template -->
<script type="text/ng-template" id="X-template.html">
<button ng-click='clickMe()'><b>Check model</b></button>
Directive: <input ng-model="foo.test"></input>
</script>


<div ng-controller="MyCtrl">
    <my-directive type="X"></my-directive>
    No Directive:<input ng-model="foo.test"></input>
    {{foo.test}}
</div>

CSS

/* <input ng-model=""></input> */

JavaScript

var app = angular.module('myApp',[]);

function MyCtrl($scope) {
    
    $scope.foo= {test : "asdf"};
    
    $scope.clickMe = function() {
        alert($scope.foo.test);
    }
}

app.directive('myDirective', function() {
    return {
        restrict: 'E',
        compile: function(element, attrs) {
            element.append('<div ng-include="\'' + attrs.type + '-template.html\'"></div>');
        }
    }
});