AngularJS Example

HTML

<div ng-app="helloHabrahabr">
  <div ng-controller="forExampleController">
    <input ng-model="word">
    <span habra-habr-notwork="word" habra="Nehabra"></span>
    <span habra-habr-work="word" habra="Nehabra"></span>
  </div>
</div>

JavaScript

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

angular.module('helloHabrahabr', [])
    .directive('habraHabrNotwork', function() {
        return {
            link:function($scope, element, attrs) {
               element.html("<div>{{"+attrs.habraHabrWork+"}}"+attrs.habra+"</div>");
            }
        }
    })
    .directive('habraHabrWork', function() {
        return {
                compile: function (templateElement, templateAttrs) {
                    templateElement.html("<div>{{"+templateAttrs.habraHabrWork+"}}"+templateAttrs.habra+"</div>");
                },
                link: function (scope, element, attrs) {

                }
            }
        
    });