Question

我正在动态地添加我已经附加范围功能的Li元素。但是当我点击它时会多次调用它。请看这个小提琴演示我在哪里得到这个问题。 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>

以下是我正在使用的角色代码

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 genrated然后点击第一个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>

并在控制器中

$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

Answer 2

我强烈建议你再次使用jQuery进行改动，angular是一个MVC框架，这意味着VIEW应该由来自CONTROLLER的MODEL驱动

但有时这样做是不可避免的，我已经改变了你的代码http://jsfiddle.net/udmcv/274/

var el = angular.element('<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)($scope);
  $("#ulTabList").append(el)

所以每个元素只编译一次，而不是导致多个事件附加的UL内容

Answer 3

从jQuery环境到Angular环境时我犯的一个错误是希望将jQuery用于所有内容，因为我知道它是如何工作的。真正帮助我的帖子是"“Thinking in AngularJS” if I have a jQuery background?"。它解释了＆＃34; Angular方式＆＃34;做Web应用程序。

在您的情况下，您可以（多次建议）使用Angular的ng-repeat属性来添加列表项。这种方式的工作方式是在控制器中定义要包含在数组中的项目，如下所示：

$scope.items = [
  'Item 1',
  'Item 2',
  'Item 3'
];

然后您可以在视图中访问该范围变量：

<ul>
  <li ng-repeat="item in items">{{ item }}</li>
</ul>

这将产生：

<ul>
  <li ng-repeat="item in items">Item 1</li>
  <li ng-repeat="item in items">Item 2</li>
  <li ng-repeat="item in items">Item 3</li>
</ul>

现在，在您的控制器中，您可以添加一个将项目添加到该列表的功能。像这样：

$scope.addItem = function(string) {
  $scope.items.push(string);
}

从您的视图中调用该函数：

<input type="button" ng-click="addItem('Item ' + items.length)" value="Create"/>

这会将一个项目添加到列表中（因为Angular以这种方式工作）也会向HTML添加<li>元素。

在AngularJs中多次调用Scope函数

3 个答案: