Question

每次我将li添加到我的ul时，我想要新的id如new_id_（index_number），即（id_1，id_2等等）。我使用的模板包含 li ，我使用模板的原因是因为它包含很多数据，如3-4个表单，其中包含太多字段。我使用以下代码：
我的代码段：

<div ng-controller="ContractsController">
 <ul id="contracts">
   <li id="new_{{indx}}"></li>
 </ul>
<button class="add_new" add-contracts>Add New Item</button>
</div>
<script type="text/javascript">

 var app = angular.module('AjApp', []);

 app.controller('ContractsController', function ( $scope ) {
    $scope.indx = 1;
 });

 app.directive('addContracts', function ( $templateRequest, $templateCache, $compile ) {       
    return {
        restrict: 'A',
        scope: true,
        link: function(scope, ele, attr) {

            ele.on("click", function(e) {
                e.preventDefault();
                var $contracts = jQuery("ul#contracts");
                ++scope.indx;

               $templateRequest("add_contracts.html" ).then(function(html){
                  var template = angular.element(html);
                  $contracts.append(template);
                  $compile(template)(scope);
               });


            });
        },
    };
});


</script>

代码将 li 附加到 ul ，但每次点击 添加新项按钮 所有 li 更新为相同的 ID 。
问题是什么？我错过了什么吗？请建议我解决问题的方法。任何帮助都会非常感激。提前谢谢。

Answer 1

您可以为每个合约创建一个新的子范围，每个子范围都包含自己的ID。

此外，add-contracts指令处理的逻辑可能由控制器处理。这样您就不必使用jQuery("ul#contracts")选择div。在我的示例中，我将其更改为使用css类，选择器变为$element.find('.contracts')。

以下是一个例子：

http://jsfiddle.net/rs1whmo7/

Answer 2

使用++scope.$parent.indx代替++scope.indx

Answer 3

使用范围false而不是true

app.directive（'addContracts'，function（$ templateRequest，$ templateCache，$ compile）{
返回{ 限制：'A'，范围：false， link：function（scope，ele，attr）{

INT

}）;

OR如果您仍想继承父作用域，请将索引保留在对象
中

DISTINCT

每次使用角度js中的新范围动态添加元素

3 个答案: