javascript - 将元素内的 Html DOM 作为字符串传递给 AngularJS Controller

Question

我想将元素内的 Html DOM 作为字符串抓取到 Angular Controller 。我在网上没有找到好的资源。我有以下 Html 代码:

 <div class="form-group ng-controller="straightRunningBeltsCtrl"">
         <button class="btn btn-success btn-lg" ng-click="post()">Get Service Factor</button>

           <div id="pop-up"><h1>My content here!!</h1></div>
      </div>

我有以下 JS 代码

angular.module('straightRunningBelts', [ ])
.controller('straightRunningBeltsCtrl', straightRunningBeltsCtrl)

function straightRunningBeltsCtrl($stateParams, $scope, $http,  $sce){
 $scope.post= function () {
 var template=$sce.trustAsHtml(angular.element(document.getElementById('pop-up')));//Results an error( $sce.trustAsHtml needs string input)
    }

变量模板需要从 DOM 获取值。现在，angular.element(document.getElementById('pop-up') 返回对象。我有时想像 JQuery 那样使用 html() 函数 here 。欢迎任何帮助或引用。

Answer 1

要检索 DOM 元素内的 HTML，您可以使用 innerHTML。在你的情况下，它会是

document.getElementById('pop-up').innerHTML

Working Plunkr