我有 html theat 我想在 angularjs Controller 中使用。我的问题是转义 angularjs Controller 中的 html。这是我的片段
function($scope) {
$scope.data= <table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>$rootScope.firstname</td>
<td>$rootScope.lastname</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>$rootScope.firstname1</td>
<td>$rootScope.lastname1</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>$rootScope.firstname2</td>
<td>$rootScope.lastname2</td>
<td>@twitter</td>
</tr>
</tbody>
</table>;
如何将表格 html 和根范围数据传递到 scope.data 变量
最佳答案
只需连接 $rootScope
字段,然后将其附加到任何 html div 元素
function($scope) {
$scope.data= '<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>'+$rootScope.firstname+'</td>
<td>'+$rootScope.lastname+'</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>'+$rootScope.firstname1+'</td>
<td>'+$rootScope.lastname1+'</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>'+$rootScope.firstname2+'</td>
<td>'+$rootScope.lastname2+'</td>
<td>@twitter</td>
</tr>
</tbody>
</table>';
编辑:
var app=angular.module("testProject",[]);
app.controller("TestController", function($scope, $rootScope) {
$rootScope.firstname="firstname";
$rootScope.lastname="lastname";
$rootScope.firstname1="firstname1";
$rootScope.lastname1="lastname1";
$rootScope.firstname2="firstname2";
$rootScope.lastname2="lastname2";
$scope.data= '<table class="table"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr></thead> <tbody> <tr> <td>1</td><td>'+$rootScope.firstname+'</td><td>'+$rootScope.lastname+'</td><td>@mdo</td></tr><tr> <td>2</td><td>'+$rootScope.firstname1+'</td><td>'+$rootScope.lastname1+'</td><td>@fat</td></tr><tr> <td>3</td><td>'+$rootScope.firstname2+'</td><td>'+$rootScope.lastname2+'</td><td>@twitter</td></tr></tbody> </table>';
$("#data_table").append($scope.data);
});
<html ng-app="testProject">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-controller="TestController" id="data_table"></div>
</html>
关于javascript - 在 angularjs Controller 中使用 html,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53258791/