在AngularJS中從模板中獲取已編譯的html

我必須承認，在AngularJS中編譯模板並不容易找到一些基本的，易於理解的指南。這裏是交易：在AngularJS中從模板中獲取已編譯的html

在我的主HTML頁我有這樣的：

<div> 
    <div data-ng-include="'./views/testTemplate.html'"></div> 
</div> 
<div> 
    <input type=button ng-click="func()" /> 
</div>

testTemplate.html包含此：

hello {{myname}}

林我的JavaScript控制器我有這樣的：

$scope.myname = 'max';

現在，當我查看該頁面時，我看到文本「hello max」。

林我的JavaScript控制器我也有這樣的：

$scope.func = function(){ 
    var newScope = $scope.$new(); 
    var newElem = '<ng-src><div ng-include="\'./views/testTemplate.html\'" ></div></ng-src>'; 
    $compile(newElem)(newScope); 
    console.log('newElem'); 
    console.log(newElem); 
});

在控制檯中，我可以看到這一點：

newElem 
<ng-src><div ng-include="'./views/testTemplate.html'" ></div></ng-src>

因此，模板是沒有得到編譯？我錯過了什麼？

***************編輯***************

的事情是，我試着打印到控制檯的新元素的內容，因爲它需要郵寄。所以我需要發送一封包含模板中已編譯內容的郵件。

說完看着下面的答案，我現在有這樣的：

var newElem = '<ng-src><div ng-include="\'./views/testTemplate.html\'" ></div></ng-src>'; 
var compiledElem = $compile(newElem)(newScope); 
console.log('compiledElem[0]'); 
console.log(compiledElem[0]);

如果我用這個：

$window.location.href = 'mailto:mailmail.com?subject=sub&body=' + compiledElem[0].innerHTML;

那麼郵件的正文中包含此（未編譯模板）：

<!-- ngInclude: './views/matching/testTemplate.html' -->

如果我使用這個：

$window.location.href = 'mailto:mailmail.com?subject=sub&body=' + compiledElem[0];

那麼郵件的正文中包含此：

[object HTMLElement]

所以他們都不是表示我要發送郵件的HTML內容。我知道它不完全是原始問題，但它是問題的一部分。

來源

2017-09-05 oderfla

我認爲變量'newElem'沒有被$ compile命令修改。它有一個你應該使用的返回值。

var compiledElement = $compile(newElem)(newScope); 
console.log('compiledElement'); 
console.log(compiledElement);

來源

2017-09-05 13:29:03

請你可以看看編輯過的問題嗎？ – oderfla

你能說明什麼內容在compiledElement變量中嗎？它是一個html對象列表嗎？對象有什麼內容？ –

實際上它只包含一個包含文本的div。我現在開始考慮是否可以調用「mailto」函數併發送給它一個html頁面。這可能是另一個問題。我現在所能做的最好的就是讓mailto-function從編譯後的代碼中獲取html（）。但是，在我的客戶端郵件正文中，我只能看到純粹的html代碼。而我實際上正在尋找有真正的HTML頁面。 – oderfla

您錯過了將HTML加入DOM。

$scope.func = function(){ 
    var newScope = $scope.$new(); 
    var newElem = '<ng-src><div ng-include="\'./views/testTemplate.html\'" ></div></ng-src>'; 

    //Append to DOM 
    document.querySelector('#some-id').append($compile(newElem)(newScope)); 

    console.log('newElem'); 
    console.log(newElem); 
});

在我的例子我使用document.querySelector是生js。但是我們可以使用$element服務，或者如果我們在一個指令的link函數中，它會接收一個代表應用指令的當前元素的參數。

編輯：

如果你想發送的電子郵件編譯HTML，那麼，你就需要等到所有的$digest完成編譯模板。

$scope.func = function(){ 
    var newScope = $scope.$new(); 
    var newElem = angular.element('<ng-src><div ng-include="\'./views/testTemplate.html\'" ></div></ng-src>'); 

    $compile(newElem)(newScope); 

    $timeout(function(){ 

     $window.location.href = 'mailto:mailmail.com?subject=sub&body=' + newElem.html(); 

     //console.log('newElem'); 
     //console.log(newElem.html()); 
    }); 

});

創建使用angular.element模板，使用$timeout要等到年底再使用newElem.html();。

來源

2017-09-05 13:31:24

請你可以看看編輯過的問題嗎？ – oderfla

@oderfla看到我的編輯，你需要等到'angular'完成編譯你的模板。 –

在AngularJS中從模板中獲取已編譯的html

回答

相關問題