检索AngularJS指令的内部HTML templateUrl覆盖之前 [英] Retrieve inner HTML of AngularJS directive before templateUrl overrides it

问题描述

我有一个指令，我用我最近重构表单验证样板。请允许我在展开之前稍微进一步解释该指令。

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.

该指令的用法：

<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，我的指令看起来是这样的，它的工作

app.directive('validatedForm', function($compile, $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);
            $compile(element.contents())(scope);

        }
    }
});

HTML模板变得凌乱，我想换行按钮内部的模板，而不是在他们之后。所以我重构到了我认为是一个更好的指令。

The html template was becoming 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', ['$compile', '$sce', function ($compile, $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(' ', '') === '')
            };

        }
    };
}]);

那么，我注意到的是，element.html（）现在检索templateUrl的内容，而不是我的指令的内部HTML的内容。我还能如何得到我的指令的内容之前，它就会被templateUrl重写？

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?

推荐答案

要访问iniital HTML可以使用 $ transclude 指令控制器内。这是从早期版本略有变化，使假定使用1.2

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();
      });

    }

<大骨节病> 演示

这篇关于检索AngularJS指令的内部HTML templateUrl覆盖之前的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！