Функция Scope вызывается несколько раз в AngularJs

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 раза. Когда я нажимаю кнопку 2-го лития, его вызывают 2 раза и так далее.

Пожалуйста, предложите некоторую идею по этой проблеме. Спасибо!

Answer 1

Я настоятельно советую вам Agains такого рода изменения с JQuery, угловатый является MVC, что означает, что VIEW должен управляться с помощью MODEL от CONTROLLER

, но иногда это неизбежно, чтобы сделать это, я изменил код 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 2

Вы можете использовать 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 3

A ошибка, которую я совершил при переходе из среды jQuery в среду Angular, хочет использовать jQuery для всего, потому что я знал, как это работает. Сообщение, которое действительно помогло мне, было "“Thinking in AngularJS” if I have a jQuery background?". В нем объясняется «Угловой способ» веб-приложений.

В вашем случае вы можете (как предложено несколько раз) использовать атрибут Angular's 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"/> 

Это добавит элемент в списке и (потому что Угловое работает таким образом) также добавляет <li> элемент в HTML.