Angular Nested directive

by maxisam

HTML

<div ng-app="test2">
<div ng-controller="Ctrl">
    start
    <div>val = {{val}}</div>
    <div content="'hello'"></div>
    <div content="val"></div>
    <br/><br/>static:
    <static param="hello"></static>
    <br/><br/>dynamic:
    <dyn param="val"></dyn>
    <br/><br/>end
</div>
</div>

JavaScript

function Ctrl($scope){
    $scope.val='dddd';
}
    
angular.module('test2', [])
.directive('static', function(){
        return{
            template:'<div content="\'x\'"></div>{{param}}',
            restrict:'E',
            scope:{param:'='}
        };
    })
.directive('dyn', function(){
        return{
            template:'<div content="param"></div>{{param}}',
            restrict:'E',
            scope:{param:'='}
        };
    })
.directive('content',function(){
    return{
        scope: { content: '@' },
        link: function(scope,element,attrs){
            element.text('content: '+scope.content);
        }
    }        
})