Scope function is getting called multiple times in AngularJs

Question

I am dynamicaaly adding Li elements in which i have attached scope function .But when i am clicking on that it gets called multiple times. Please see this fiddle demo where i am getting this issue. http://jsfiddle.net/udmcv/260/

The Html is as below

<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>

and below is the Angular Code that i am using

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');
    }
})

I have also seen some post which says some suggestion but that din't work for me. The issue is like suppose when i have 3 li genrated then on click of first Li button it gets called 3 times. When i am clicking on 2nd Li button it's getting called 2 times and so on.

Please suggest some idea for this problem. Thanks!

Don't manually add to the DOM like this. You should be manipulating data structures which bind to the view to create what you want... not manipulate the view manually. — tymeJV, Dec 31 '15 at 14:02
@Grundy :Actually I want the li element get generated and appended to Ul on button's click only — rahul rathore, Dec 31 '15 at 14:02
also you generate not valid html because insert input inside ul directly — Grundy, Dec 31 '15 at 14:04
Take jQuery.js completely out of your app and use angular methodology — charlietfl, Dec 31 '15 at 14:05
It happens because you compile content of UL each time you add element therefore you attach multiple listeners to the element — maurycy, Dec 31 '15 at 14:09
@Maurycy: Thanks for your suggestion it worked ! I changed my code from $compile(el.contents())($scope); To $("#ulTabList").append($compile($el)($scope)); and it worked for me.Thanks and Happy new year — rahul rathore, Dec 31 '15 at 14:40

Grundy · Answer 1 · 2015-12-31T14:21:32.943

2

You can use ng-repeat and array, without 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>

and in 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

edited Dec 31 '15 at 14:21

answered Dec 31 '15 at 14:08

Grundy

13,356
3
35
55

score 1 · Accepted Answer · answered Dec 31 '15 at 14:14

1

I strongly advice you agains that kind of alteration with jQuery, angular is an MVC framework which means that VIEW should be driven by MODEL from CONTROLLER

but sometimes it is inevitable to do so, i've altered your code 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)

so it would compile only once per element, not content of UL which was causing multiple event attached

answered Dec 31 '15 at 14:14

maurycy

8,455
1
27
44

Thanks MauryCY for your help. – rahul rathore Jan 05 '16 at 18:29
Hi Maurycy: Can you please help me in this angular js problem http://stackoverflow.com/questions/34616568/scope-function-inside-li-element-is-not-getting-called?noredirect=1#comment56984436_34616568 – rahul rathore Jan 06 '16 at 06:13

score 0 · Answer 3 · edited May 23 '17 at 12:23

A mistake I made when going from a jQuery environment to an Angular environment is wanting to use jQuery for everything, because I knew how it worked. A post that really helped me was this "“Thinking in AngularJS” if I have a jQuery background?". It explains "The Angular way" of doing web applications.

In your case you could (as suggested multiple times) use Angular's ng-repeat attribute to add list items. The way this works is you define the items you want to have in an array in your controller, like this:

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

And then you can access that scope variable in your view:

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

This will produce:

<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>

Now, in your controller you can add a function that adds an item to that list. Like this:

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

And call that function from your view:

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

This will add an item to the list and (because Angular works that way) also adds a <li> element to the HTML.

Scope function is getting called multiple times in AngularJs

3 Answers3