如何使用 ng-repeat 重复的 J Query 追加 table 行到 Table getting error $compile not found |Angular js

Question

我有一个 <table>，用户可以在其中生成新的 table 行 <tr>。我使用 j Query .prepend() 生成新的 tr，每行包含一个 <datalist> 填充了 ng-repeat，因此用户可以 select 购买一个项目。我的问题是当我尝试编译新的 <tr> 元素时出现错误 $compile is not defined.

这是我的观点：

<body ng-app="MyApp">
    <div class="container" ng-controller="sellAndSupply">
        <table id="purchasesTable">
            <thead>
                <tr>
                    <tr>
                        <td>Supplier Name</td>
                        <td><input type="text"/></td>
                    </tr>
                    <tr>
                        <td>Telephone</td>
                        <td><inpu type="text"/></td>
                    </tr> 
                    <tr>
                        <td>Location</td>
                        <td><input type="text"></td>
                    </tr>
                <tr>
                    <th class="text-center"><h4><strong>Item Name</strong></h4></th>
                    <th class="text-center"><h4><strong>Quantity</strong></h4></th>
                    <th class="text-center"><h4><strong>Item Price</strong></h4></th>
                    <th class="text-center"><h4><strong>Total Price</strong></h4></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <input type="text" list="itemList" class="form-control">

                        <datalist id="itemList">
                            <option ng-repeat="accesso in allAccessories" value={{accesso.name}}>
                        </datalist>
                    </td>
                    <td><input type="text"></td>
                    <td><input type="text"></td>
                    <td><input type="text"></td>
                </tr>
                <tr>
                    <td class="newEntityPurchase"><label>New Entity</label></td>
                </tr>
                <tr>
                    <td colspan="4">Sell</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

这是我的 JS：

var articleHTML= angular.element('<tr><td><input type="text" list="itemList" class="form-control"><datalist id="itemList"><option ng-repeat="accesso in allAccessories" value={{accesso.name}}></datalist></td><td><input type="text" class="form-control"></td><td><input type="text" class="form-control"></td><td><input type="text" class="form-control"></td></tr>');
var compileAppendedArticleHTML= $compile(articleHTML);
var element = compileAppendedArticleHTML($scope);

/* Generate a new entity row for Purchases table */
$(".newEntityPurchase").click(function(){
    $('#purchasesTable > tbody:last-child').prepend(element);
});

Answer 1

您应该使用 Angular 而不是 jQuery 来生成新行。

如何使用 ng-repeat 重复的 J Query 追加 table 行到 Table getting error $compile not found |Angular js

How to Append a table row with J Query repeated with ng-repeat to a Table getting error $compile not found |Angular js

jquery

append

prepend

angularjs

angularjs-ng-repeat