jquery - 范围函数在 AngularJs 中被多次调用

Question

我正在动态添加 Li 元素，其中我附加了作用域函数。但是当我单击它时，它会被多次调用。请参阅这个 fiddle 演示，我在其中遇到了这个问题。 http://jsfiddle.net/udmcv/260/

Html如下

<div style="border:solid;color:red;Margin-bottom:4px;">
Click on Create Button to Generate the required li'sThe issue is that when there multiple Li  the corresponding is getting called multiple time
<ul id="ulTabList" >
</ul>
</div>
<div style="margin-top:10px;">
<input type="button" ng-click="Addli()" value="Create"/>
</div>

下面是我正在使用的 Angular 代码

var app = angular.module('my-app', [], function () {

})

app.controller('AppController', function ($scope, $compile) {
var workGroupTab ="TestA"
$scope.Addli =function(){
    var el = $("#ulTabList").append('<li ng-click="OpenWorkGroupTab();">Text of Li</li>'
    +'<input id="btnClose_4341" type="button" value="btn"  style="margin-left:1px;" ng-click="fn_btnClose()">');

  $compile(el.contents())($scope);
  }  
    $scope.fn_btnClose = function(){
        console.log('clicked'+ 'val');
    }

    $scope.OpenWorkGroupTab =function(){
     console.log('val2');
    }
})

我也看到过一些帖子，其中提出了一些建议，但对我来说不起作用。问题就像假设当我生成了 3 个 li 时，然后单击第一个 Li 按钮，它会被调用 3 次。当我点击第二个 Li 按钮时，它会被调用 2 次，依此类推。

请针对这个问题提出一些想法。谢谢!

Answer 1

您可以使用ng-repeat和数组，没有 jQuery

<ul id="ulTabList" >
    <li ng-repeat="item in items">
        <input type="button" value="btn"  style="margin-left:1px;" ng-click="fn_btnClose()">
    </li>
</ul>

在 Controller 中

$scope.items = [];

$scope.Addli = function(){
    $scope.items.push(1);//in your case not matter what objects in array because you not use it inside view
}

Edited JSFIDDLE