Currently, I am in the process of creating an AngularJS directive and require the ability to extract the HTML content of an element before replacing it with a template. For instance:
<edit>Default title</edit>
The structure of my directive is as follows:
.directive('edit', function() {
return {
restrict: "EA",
scope: {},
template: '<h1 ng-show="!edit_mode">{{variable.value}}</h1><input ng-show="edit_mode" ng-model="variable.value" />',
link: function( scope, element ) {
scope.edit_mode = false;
scope.variable = {
value: element.html()
}
console.log( scope.variable );
}
}
});
However, upon checking the console output (and the webpage), I noticed the following:
Object {value: "<h1 ng-show="!edit_mode" class="ng-binding">{{variable.value}}</h1><input ng-show="edit_mode" ng-model="variable.value" class="ng-pristine ng-valid">"}