AngularJS directive with interpolation

by dekkard

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

// http://habrahabr.ru/post/179755/

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

/*
директива habraHabrNotwork не будет работать корректно, поскольку мы вставляем директиву "{{}}" с переменными в postLink, то есть, когда уже выполнены компиляця и линкование. Иными словами Angularjs даже не знает, что "{{}}" это директива, которая подлежит исполнению.
*/
angular.module('helloHabrahabr', [])
    .directive('habraHabrNotwork', function() {
        return {
            link:function($scope, element, attrs) {
               element.html("<div>{{"+attrs.habraHabrWork+"}}"+attrs.habra+"</div>");
            }
        }
    })

/*
Тут всё на своем месте, мы вставляем шаблон "{{"+attrs.habraHabrNotwork+"+"+attrs.habra+"}}" до компиляции, и он успешно проходит рендеринг.
*/
    .directive('habraHabrWork', function() {
        return {
                compile: function (templateElement, templateAttrs) {
                    templateElement.html("<div>{{"+templateAttrs.habraHabrWork+"}}"+templateAttrs.habra+"</div>");
                },
                link: function (scope, element, attrs) {

                }
            }
        
    });