I have a directive I use for form validation boilerplate which I recently refactored. Allow me to explain the directive a little further before expanding.

The directive usage:

<form class="form-horizontal" name="personalDetails" validated-form>

    <!-- Pass buttons into form through here -->
    <a href="" class="btn btn-success" 
        data-ng-click="saveDetails()"
        data-ng-disabled="!personalDetails.$valid">Save Changes</a>

</form>

Previously, my directive looked something like this, and it worked.

app.directive('validatedForm', function($pile, $sce) {
    return {
        restrict: 'A',
        scope: true,
        link: function(scope, element, attrs) {

            var template = //... HTML boilerplate code
            var buttons  = element.html(); // Get contents of element before overriding

            element.html(template + buttons);
            $pile(element.contents())(scope);

        }
    }
});

The html template was being messy, and I wanted to wrap the buttons 'inside' of the template, rather than after them. So I refactored into what I thought was a much better directive.

app.directive('validatedForm', ['$pile', '$sce', function ($pile, $sce) {

    var domContent = null;

    return {
        restrict: 'AE',
        scope: true,
        templateUrl: '/Content/ngViews/directives/validated-form.html',
        link: function(scope, element, attrs) {

            // This now returns the contents of templateUrl 
            // instead of what the directive had as inner HTML
            domContent = element.html(); 

            // Scope
            scope.form = {
                caption: attrs.caption,
                location: 'Content/ngViews/forms/' + attrs.name + '.html',
                buttons: $sce.trustAsHtml(domContent),
                showButtons: !(domContent.replace(' ', '') === '')
            };

        }
    };
}]);

So what I'm noticing is that element.html() now retrieves the contents of the templateUrl instead of the contents of the inner HTML of my directive. How else can I get the contents of my directive before it gets overriden by the templateUrl?

I have a directive I use for form validation boilerplate which I recently refactored. Allow me to explain the directive a little further before expanding.

The directive usage:

<form class="form-horizontal" name="personalDetails" validated-form>

    <!-- Pass buttons into form through here -->
    <a href="" class="btn btn-success" 
        data-ng-click="saveDetails()"
        data-ng-disabled="!personalDetails.$valid">Save Changes</a>

</form>

Previously, my directive looked something like this, and it worked.

app.directive('validatedForm', function($pile, $sce) {
    return {
        restrict: 'A',
        scope: true,
        link: function(scope, element, attrs) {

            var template = //... HTML boilerplate code
            var buttons  = element.html(); // Get contents of element before overriding

            element.html(template + buttons);
            $pile(element.contents())(scope);

        }
    }
});

The html template was being messy, and I wanted to wrap the buttons 'inside' of the template, rather than after them. So I refactored into what I thought was a much better directive.

app.directive('validatedForm', ['$pile', '$sce', function ($pile, $sce) {

    var domContent = null;

    return {
        restrict: 'AE',
        scope: true,
        templateUrl: '/Content/ngViews/directives/validated-form.html',
        link: function(scope, element, attrs) {

            // This now returns the contents of templateUrl 
            // instead of what the directive had as inner HTML
            domContent = element.html(); 

            // Scope
            scope.form = {
                caption: attrs.caption,
                location: 'Content/ngViews/forms/' + attrs.name + '.html',
                buttons: $sce.trustAsHtml(domContent),
                showButtons: !(domContent.replace(' ', '') === '')
            };

        }
    };
}]);

So what I'm noticing is that element.html() now retrieves the contents of the templateUrl instead of the contents of the inner HTML of my directive. How else can I get the contents of my directive before it gets overriden by the templateUrl?

• javascript
• angularjs

1 Answer 1

To access the iniital html can use $transclude within directive controller. This is a slight change from earlier versions so assumes using 1.2

controller:function($scope,$transclude){
      $transclude(function(clone,scope){
        /* for demo am converting to html string*/
         $scope.buttons=angular.element('<div>').append(clone).html();
      });

    }

DEMO