I've tried to write a small directive, to wrap its contents with another template file.

This code:

<layout name=Default>My cool content</layout>

Should have this output:

<div class=layoutDefault>My cool content</div>

Because the layout Default has this code:

<div class=layoutDefault>{{content}}</div>

Here the code of the directive:

app.directive('layout', function($http, $compile){

return {

    restrict: 'E',

    link: function(scope, element, attributes) {

        var layoutName = (angular.isDefined(attributes.name)) ? attributes.name : 'Default';

        $http.get(scope.constants.pathLayouts + layoutName + '.html')

            .success(function(layout){

                var regexp = /^([sS]*?){{content}}([sS]*)$/g;

                var result = regexp.exec(layout);



                var templateWithLayout = result[1] + element.html() + result[2];

                element.html($compile(templateWithLayout)(scope));

            });

    }

}

});

My problem:

When I'm using scope variables in template (in layout template or inside of layout tag), eg. {{whatever}} it just work initially. If I update the whatever variable, the directive is not updated anymore. The whole link function will just get triggered once.

I think, that AngularJS does not know, that this directive uses scope variables and therefore it will not be updated. But I have no clue how to fix this behavior.