У меня есть директива, которую я использую для шаблона валидации формы, который я недавно реорганизовал. Позвольте мне объяснить директиву немного дальше, прежде чем расширяться.
Использование директивы:
<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>
Ранее моя директива выглядела примерно так: работал.
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 становился грязным, и я хотел обернуть кнопки "внутри" шаблона, а не после них. Поэтому я переработал то, что я считал гораздо лучшей директивой.
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?
Для доступа к iniital html можно использовать $transclude внутри директивного контроллера. Это небольшое изменение от более ранних версий, поэтому предполагается использование 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();
});
}