AngularJS: Nested directives

http://angularjs.org/

by Luca De Nardi

HTML

<script src="http://code.angularjs.org/1.2.13/angular.min.js"></script>
<formhp>
    <rowhp numrows="2">
        <xbutton text="Button 1">
            <andrej content="function1"></andrej>
        </xbutton>
    </rowhp>
    <xrow numrows="1">
        <xbutton text="Button 2">
            <andrej content="function2"></andrej>
        </xbutton>
    </xrow>
</formhp>

JavaScript

//Print node error -> alert(elem[0].outerHTML);
var defaultHeight = 30;
function andrejFunction(element){
    console.log(element);
}
var myApp = angular.module('myApp', []);
myApp.controller('DemoCtrl',['$scope', function($scope){
}])
.directive('formhp', function(){
    return {
        restrict: 'E',
        scope: {},
        transclude: true,
        replace: true,
        template: function(elem, attr){
            var newTag = "<form ";
            var condition = true;
            var visible = true;
            if(typeof $(elem).attr('condition') !== typeof undefined && $(elem).attr('condition') !== false && attr.condition == 'false') condition = false;
            if(typeof $(elem).attr('visible') !== typeof undefined && $(elem).attr('visible') !== false && attr.visible == 'false') visible = false;
            if(condition==false) newTag+="ng-if='false' ";
            if(visible==false) newTag+="ng-show='false' ";
            newTag += '>';
            return newTag + "<div ng-transclude></div></form>"
        },
        link: function(scope, element){
            scope.isEnabled = true;
        }
    }
})
.directive('rowhp', function(){
    return {
        restrict: 'E',
        scope: {},
        transclude: true,
        replace: true,
        template: function(elem, attr){
            var style = "style='height: " + attr.numrows * defaultHeight + "px !important'";
            return "<div ng-transclude " + style + "></div>"
        },
        link: function(scope, element){
            scope.isEnabled = true;
        }
    }
})
.directive('xbutton', function(){
    return {
        restrict: 'E',
        scope: {},
        transclude: true,
        replace: true,
        template: function(elem, attr){
            return "<button>" + attr.text + "<div ng-transclude></div></button>"
        },
        link: function(scope, element){
            var children = element[0].children;
            for(i = 0; i < children.length; i++){
                var...