AngularJS Example

HTML

<div ng-app="helloHabrahabr">
  <div ng-controller="forExampleController">
    <input ng-model="word">
    <span habra-habr-work="word" habra="NehabraParent">
        <span habra-habr-work="word" habra="NehabraChild"></span>
    </span>
    <pre>{{log}}</pre>
  </div>
</div>

JavaScript

function forExampleController($scope) {
    $scope.word="Habrahabra";
    $scope.log="";
}

angular.module('helloHabrahabr', [])

    .directive('habraHabrWork', function() {        
        return {
            compile: function compile(templateElement, templateAttrs) {
                templateElement.prepend("<div>{{"+templateAttrs.habraHabrWork+"}}"+templateAttrs.habra+"</div>");
                return {
                    pre: function ($scope, element, attrs, controller) {
                        $scope.log+=templateAttrs.habra +' preLink \n';
                    },
                    post: function ($scope, element, attrs, controller) {
                        $scope.log+=templateAttrs.habra +' postLink \n';
                    }
                }
            }
        }
    });