如何在HTML元素中添加append（）方法顯示控制器的值？

Question

我會感謝任何幫助。我的問題：在我看來，我無法顯示$scope.info的價值。我沒有直接訪問html，所以我只能通過js更改DOM。 我創建新元件並將其與append()方法

$scope.info = { 
    clicks: 15862, 
    spent: '$124', 
    created: '04/08/2017', 
    author: 'John Kovalenko', 
    name: 'Advertise US' 
}; 

var info = document.createElement('div'); 
info = angular.element(info).attr({ 
    'ng-bind': 'info', 
    'class': 'statistic-info' 
}); 
angular.element(infoContainer).append(info[0]); 

我創建這裏例如添加到DOM。 http://jsfiddle.net/ADukg/13598/

我在做什麼錯了？謝謝

Answer 1

你必須使用$compile當你手動注入任何使用指令

var info = angular.element('<div>').attr({ 
    'ng-bind': 'info.author', 
    'class': 'statistic-info' 
    }); 

    info = $compile(info)($scope); 

    angular.element(infoContainer).append(info); 

確保無論您使用注入$compile它

DEMO

Answer 2

最簡單答案是在追加數據之前將數據添加到HTML內容中。既然你有一個對象，我已經在下面的代碼片段中提供了它的一個屬性。

發生了什麼是您的頁面加載，並且摘要循環已經完成。你所追加的只是簡單的文字，因此沒有內插。我提供的這種方法不會提供雙向綁定。如果需要，您應該使用指令。

var infoTwo = '<div><p>' + $scope.info.clicks + '</p></div>'; 

這就是說，charlieftl有最好的答案。