Question

说我有以下anglarjs DOM结构

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

    ... content

</div>

我如何获得编译的＆＃39;例如，在点击事件上的这个版本？即。

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

我有一个使用各种ui-bootstrap组件的angularjs页面，我想获取页面的原始html，将其发送到服务器，以便它（服务器）可以从中生成.pdf文件发送了HTML。

服务器可以访问所有相关的css文件。

编辑：

我试过innerHTML无济于事。

Answer 1

你可以试试暴力：

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>

运行代码，填写文本框并在警告框中查找***。在它们上方，如果您在输入框中输入red，则会看到class =“... red”。

Answer 2

Angular会根据绑定的控制器值编译您的视图，但它不会从您的html中删除ng-class like指令，因为它仍会监视并将范围更改应用到您的视图中。例如，它将ng-class="{'red': true}"编译为class="red"，但ng-class部分仍然是

Answer 3

Souldreamer的答案是正确的，只要你把它包装到Angular的$ scope中：

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/

AngularJS得到了编译的html＆＃39;

3 个答案: