2015-12-31 96 views
1

我是動態添加Li元素的,其中我附加了範圍函數。但是當我點擊它時會被多次調用。 請看這個小提琴演示,我得到這個問題。 http://jsfiddle.net/udmcv/260/範圍函數在AngularJs中被多次調用

的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生成然後點擊第一個li按鈕它被稱爲3次。 當我點擊第二個按鈕時,它會被調用2次,依此類推。

請爲這個問題提出一些想法。 謝謝!

+0

爲什麼你不使用'ng-repeat'? – Grundy

+3

不要像這樣手動添加到DOM。你應該操作綁定到視圖的數據結構來創建你想要的內容......而不是手動操作視圖。 – tymeJV

+0

@Grundy:其實我想要li元素得到生成並附加到UI上,只有按鈕的點擊 –

回答

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的內容的多個事件連接

+0

感謝MauryCY的幫助。 –

+0

嗨Maurycy: 你能幫我在這個角度js問題 http://stackoverflow.com/questions/34616568/scope-function-inside-li-element-is-not-getting-called?noredirect=1# comment56984436_34616568 –

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

0

一我從jQuery環境轉到Angular環境時犯的錯誤是想要爲所有事情使用jQuery,因爲我知道它是如何工作的。一個真正幫助我的帖子是這個"「Thinking in AngularJS」 if I have a jQuery background?"。它解釋了做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"/> 

這將項目添加到列表中,(因爲角度這樣工作),還增加了一個<li>元素的HTML。