Angular: Empty Fiddle
http://angularjs.org/
HTML
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<genius-table attr="'toto'">
<additional-line>
UU{{ getAttribute("i") }}
</additional-line>
</genius-table>
JavaScript
var app = angular.module('app', []);
app.directive('geniusTable', function () {
return {
restrict: 'E',
transclude: {
'additionalLine': '?'
},
scope: {
attr: "="
},
template: '<genius-table-table><internal-additional-line ng-transclude="additionalLine"></internal-additional-line></genius-table-table>'
}
});
app.directive('geniusTableTable', function() {
return {
restrict: 'E',
transclude: {
'additionalLine': '?internalAdditionalLine'
},
template: '{{ i=5; ""}}<div ng-transclude="additionalLine"></div>'
}
});
app.directive('additionalLine', function() {
return {
restrict: 'E',
controller: function ($scope) {
$scope.get = function(target, name) {
console.log(target);
return target.hasOwnProperty(name) ? target[name] : 42;
}
$scope.getAttribute = function(attr_name){
return $scope.$parent.$parent[attr_name];
};
}
}
});