如何在jquery中附加到html之前编译字符串（包含角度目录）？
Posted
技术标签:
【中文标题】如何在jquery中附加到html之前编译字符串（包含角度目录）？【英文标题】：how to compile string(contains angular dir) before appending into html in jquery? 【发布时间】：2018-05-23 14:03:56 【问题描述】：这里是自动生成发票的html和jquery的代码。在这里我通过qnty*rate 显示总金额，但如果我通过jquery 传递它，那么我必须编译angular 因为我知道在执行此操作之前我必须编译它，但是我怎样才能在jquery 中编译它？
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<table class="tg">
<tr>
<td class="tg-9hbo">Description of Goods</td>
<td class="tg-9hbo">HSN CODE</td>
<td class="tg-9hbo">QTY</td>
<td class="tg-9hbo">Units</td>
<td class="tg-9hbo">Rate</td>
<td class="tg-9hbo">AMOUNT (INR)</td>
</tr>
<tr class="products" ng-app="">
<td class="tg-yw4l"><input type="text"></td>
<td class="tg-yw4l"><input type="text"></td>
<td class="tg-yw4l"><input type="number" ng-model="qty"></td>
<td class="tg-yw4l"><input type="text"></td>
<td class="tg-yw4l"><input type="number" ng-model="rate"></td>
<td class="tg-yw4l">qty * rate</td>
</tr>
<tr>
<td class="tg-yw4l">
<button class="addp">Add New Product</button>
</td>
</tr>
<tr>
<td class="tg-yw4l">TAX<br>GST <input type="number">%</td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l">18%</td>
<td class="tg-yw4l">718.2</td>
</tr>
<tr>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l">GRAND TOTAL</td>
<td class="tg-yw4l">4708</td>
</tr>
</table>
<script>
var tbl = '<tr class="products1" ng-app="">'+
'<td class="tg-yw4l1"><input type="text"></td>'+
'<td class="tg-yw4l1"><input type="text"></td>'+
'<td class="tg-yw4l1"><input type="number" ng-model="qty1"></td>'+
'<td class="tg-yw4l1"><input type="text"></td>'+
'<td class="tg-yw4l1"><input type="number" ng-model="rate1"></td>'+
'<td class="tg-yw4l1">qty1 * rate1</td>'+
'</tr>';
$(document).ready(function()
$(".addp").click(function()
$(".products").after(tbl);
);
);
</script>
【问题讨论】：
当您使用 angularjs 时，我看不到使用 jquery 添加元素的意义。尝试使用 ng-repeat 通过将其绑定到产品对象数组来填充产品行。您可以动态地将新对象添加到所述数组中，并且视图将自动呈现 这里我们不知道要提前添加多少产品，我也不知道该怎么做，请显示一些代码 【参考方案1】：您的问题不是很清楚，假设您想在 angularjs 中模仿类似的行为（动态添加产品行），这里有一个示例说明如何做到这一点。
通过迭代 products 数组，使用 ng-repeat 渲染您的产品。
<html ng-app="MyApp">
<head>... </head>
<body ng-controller="ProductsController">
<table class="tg">
<tr>...</tr>
<tr class="products" ng-repeat="p in products track by $index">
<td class="tg-yw4l"><input type="text"></td>
<td class="tg-yw4l"><input type="text"></td>
<td class="tg-yw4l"><input type="number" ng-model="p.qty"></td>
<td class="tg-yw4l"><input type="text"></td>
<td class="tg-yw4l"><input type="number" ng-model="p.rate"></td>
<td class="tg-yw4l">p.qty * p.rate</td>
</tr>
<tr>
<td class="tg-yw4l">
<button class="addp" ng-click="addProduct()">Add New Product</button>
</td>
</tr>
</table>
</body>
</html>
动态添加对象到products数组。
angular.module('MyApp', []).controller('ProductsController',
function($scope)
// this array is bound to view
$scope.products= [qty:0, rate:0];
// this function is bound to the ng-click event of the button
$scope.addProducts = function()
$scope.products.push(qty:0, rate:0);
;
);
【讨论】：
以上是关于如何在jquery中附加到html之前编译字符串（包含角度目录）？的主要内容，如果未能解决你的问题，请参考以下文章
将 html 附加到 jQuery 元素而不在 html 中运行脚本
Angular 4 - 在 jquery append 中编译 [ngClass]
如何以 10 秒的间隔在 mvc razor 页面中使用 jQuery 调用方法并将输出附加到 html