Angular: Empty Fiddle
http://angularjs.org/
HTML
<script src="https://code.angularjs.org/1.4.8/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<input ng-model="name" />
<div>
<my-element data-source="name"></my-element>
</div>
</div>
</div>
JavaScript
var myApp = angular.module('myApp', []);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
myApp.controller('MyCtrl', function($scope) {
$scope.name = 'Batman';
})
.directive('myElement', function() {
return {
template: '<div>Hello {{dataSource}}</div>',
replace: true,
rescrict: 'E',
scope: {
dataSource: '='
},
link: function(scope, ele, attr) {
console.log(scope.dataSource);
}
}
})