AngularJS получить «скомпилированный HTML»

Скажем, у меня есть следующий anglarjs DOM СтруктураAngularJS получить «скомпилированный HTML»

<div ng-init="isRed = true" 
    ng-class="{'red': isRed == true, 'black': isRed == false}"> 

    ... content 

</div>

Как бы я получить «скомпилированный» версию этого на событие щелчка, например? То есть

<div class="red"> 
    ... content 
</div>

Я получил angularjs страницу, которая использует различные компоненты UI-бутстраповских и я хочу, чтобы получить сырье HTML страницы, отправить его на сервер, так что он (сервер) может генерировать файл в формате .pdf из отправленного html.

Сервер будет иметь доступ ко всем соответствующим файлам css.

Edit:

Я попытался innerHTML безрезультатно.

источник

2015-12-11 Lee Brindley

Я думаю, что это не связано с вашим вопросом, но есть ли «>» в конце первой строки вашего фактического кода или просто опечатка в этом вопросе? – bstockwell

Да, это была типография - отредактирована. –

$ sanitize service может быть тем, что вы ищете: https: //docs.angularjs.org/api/ngSanitize/service/$sanitize –

Вы можете попробовать перебором:

document.getElementsByTagName('html')[0].innerHTML

Например:

function showHTML() { 
 
    window.alert(document.getElementsByTagName('html')[0].innerHTML); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app> 
 
    <input type="text" ng-model="tester" ng-class="{'red': tester==='red'}"> 
 
    <p>The inputted value is ***{{tester}}***</p> 
 
</div> 
 
<button onclick="showHTML()">Show HTML</button>

выполнения кода, введите в текстовое поле и искать *** s в поле предупреждения. Над ними, если вы ввели red в поле ввода, вы увидите class = "... red".

источник

2015-12-11 13:54:50

Я пытался выполнить обратный вызов, но в зависимости от его использования это могло бы сделать работу отлично. – enguerranws

Не думаю, что это даст желаемый результат, т. Е. Получив 'class = "red"' output, где условие для ng-класса истинно для него, чтобы иметь «красный» класс? –

Он не меняет ng-класс, но дает класс (class = "red" включен в число фактических классов) –

Угловой компилятор, который вы просматриваете в соответствии со значениями контроллера для привязок, но не удаляет директивы ng-класса, подобные вашим html, поскольку он все еще наблюдает и применяет изменения области видимости в вашем представлении. например, она составляет ng-class="{'red': true}" в class="red", но нг-класс часть все еще остается

источник

2015-12-11 14:00:26 erdysson

Да, это не имеет значения для меня, я дал свой прецедент. Я хочу, чтобы html-вывод содержал «class =» red », независимо от того, содержит ли он директиву ng-class, не имеет значения. –

попробуйте getElementBySelector (« whatever ») и cloneNode. вы должны иметь возможность получить скомпилированную версию в dom – erdysson

ответ Souldreamer является правильным, до тех пор, как вы обернуть его в $ рамки угловой в:

function MyCtrl($scope) { 
$scope.name = 'Superhero'; 
    $scope.click =function(){ 
    alert(document.getElementById('my-el').innerHTML); // class="red", and template rendered 
    }; 


}

Живые демо:

http://jsfiddle.net/HB7LU/21029/

источник

2015-12-11 14:21:51 enguerranws

AngularJS получить «скомпилированный HTML»

ответ

Смежные вопросы