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
– tymeJV, Commented Dec 31, 2015 at 14:02
@Grundy :Actually I want the li element get generated and appended to Ul on button's click only — rahul rathore
– rahul rathore, Commented Dec 31, 2015 at 14:02

Grundy · Accepted Answer · 2015-12-31 14:21:32Z

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, 2015 at 14:21

answered Dec 31, 2015 at 14:08

Grundy

13.4k3 gold badges39 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

maurycy · Accepted Answer · 2015-12-31 14:14:40Z

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, 2015 at 14:14

maurycy

8,4201 gold badge30 silver badges44 bronze badges

2 Comments

rahul rathore Over a year ago

Thanks MauryCY for your help.

rahul rathore Over a year ago

Hi Maurycy: Can you please help me in this angular js problem stackoverflow.com/questions/34616568/…

Community · Accepted Answer · 2017-05-23 12:23:17Z

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.

Collectives™ on Stack Overflow

Scope function is getting called multiple times in AngularJs

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related