在angularjs上傳播事件

我正在使用angularjs（第一次爲我）實現一個web應用程序。我想向用戶提供的一個功能是在用戶單擊菜單中的圖像時在主窗口中創建一個div。在angularjs上傳播事件

爲此，我創建了一個指令，如下所示。

var platform = angular.module('platform', []); 

platform.directive('addElement', function() { 

    return function (scope,element, attrs){ 
     var createElement; 

     createElement = function(){ 
      $('<div>Test</div>').appendTo('#body-main-window'); 
     }; 


     $(this).on('click',createElement); 
    } 
});

這裏是html代碼如下：

<img class = "imgMenu" src="styles/img/logo_add.png" add-element />

的問題是，onClick事件觸發的元素看起來傳播到它的所有祖先。事實上，無論我點擊什麼，div都會創建。這不是預期的行爲，因爲只有當用戶點擊指令所在的圖像時纔會創建div。

此外，點擊時，該指令的執行次數與具有指令屬性的圖像一樣多。

這裏是爲了說明我的問題一個小提琴：http://jsfiddle.net/6Ku7D/10/

一個解決方案是使用NG-點擊指令，但它意味着做一些DOM修改whitin控制器（它不是實現有道我的目標）。指令是這樣的解決方案，但我被卡住..

問候

EDIT（附加信息）

其實，這是我所想要做的只是squeleton。簡而言之，我想單擊的元素位於我的應用程序的菜單中。這些元素只是一些對象的名稱。通過點擊它們，我想創建一個div，該div不會僅包含該對象的名稱，而是可以編輯的其他信息。此外，我將創建的div應該是可拖動的（使用jquery-ui），最後，我應該能夠「鏈接」這些div來創建工作流。實際上，我想要做的事情與yahoo pipes（爲混搭/工作流程版本提供用戶友好的界面）非常相似，但專用於計算機科學（數據挖掘）的研究人員。對象將是通過我開發的Web服務首先導入的算法，數據集或可視化技術。因此，它不像「爲現有數組添加值」那麼簡單。你還認爲我應該用ng-click嗎？

來源

2012-10-24 Yoann Pitarch

角，通過設計，「這個少」你的'$（this）'，不知道你想在那裏做什麼，但是你可能想要'$（element）'。 – jpsimons

@darkporter感謝您的建議。我將從現在開始遵循「這個少」的哲學。 –

這是一個jQuery事件問題...

嘗試使用stopPropagation（）從冒泡保持事件。

platform.directive('addElement', function() { 

    return function (scope,element, attrs){ 
     var createElement; 

     createElement = function(e){ 
      $('<div>Test</div>').appendTo('#body-main-window'); 
      e.stopPropagation(); 
     }; 


     $(this).on('click',createElement); 
    } 
});

編輯

我看到你想要做什麼，here is a working Plunk，做你想要做的......那這麼一說，我不認爲你這是最好的方式。

如果你想在Angular中的值列表中添加一個新的值，我想你會以困難的方式去做。然後我再也不知道你的最終目標是什麼......但試試這個來代替：

Here's a plunk for my suggested solution

<body ng-controller="MainCtrl"> 
    <div id="menu"> 
     <div ng-repeat="item in listTest" class="toAddIcon" ng-click="addResult()"> 
      {{item}}, click here to add a div to results 
     </div>       
    </div> 

    <hr/> 
    <div id="displayResult"> 
     <header> -- Results -- </header> 
     <div ng-repeat="result in results">{{result}}</div> 
    </div> 
</body>

的JS：

app.controller('MainCtrl', function($scope) { 
    $scope.listTest = ['Peter','Bob','Susan']; 
    $scope.results = []; 

    $scope.addResult = function(){ 
    $scope.results.push('TEST'); 
    }; 
});

來源

2012-10-24 13:17:21

感謝您的回覆。我已經添加了你建議的那一行，但問題仍然存在。 –

我已經改變了我的答案，以顯示我將如何完成指令聲明。如果這不起作用，你將不得不張貼小提琴或一些更完整的代碼，以便我可以看到你不喜歡的事情。 –

謝謝，我已更新我的帖子發佈小提琴。小提琴與我想要做的非常相似（除了我正在調用寧靜的web服務來提供數組）。但顯然，該指令無法識別小提琴（沒有發生，當我點擊），而它是在我的代碼... –

我會用NG-點擊。我不知道爲什麼，這意味着由控制器做DOM操作：

var platform = angular.module('platform', []); 

platform.directive('addElement', function() { 

    return function (scope,element, attrs){ 

     scope.createElement = function(){ 
      $('<div>Test</div>').appendTo('#body-main-window'); 
     }; 

    } 
});

HTML代碼：

<img class="imgMenu" src="styles/img/logo_add.png" add-element ng-click="createElement()" />

來源

2012-10-24 15:06:58

謝謝。我已更新我的問題，以添加一些關於我的應用程序需求的額外信息。您能否看看並告訴我ng-click解決方案是否更可取？ –

我仍然會去ng-click（）。首先它是最簡單的方法（據我所知），你可以在你的指令中添加無限量的額外處理，或者你只需添加一個甚至包含新指令的模板。對於可拖動性，例如，我會創建一個額外的指令，使得指令的主機元素可以拖動（這樣，您可以輕鬆地使其他事情可拖動）。總之，我不知道爲什麼你不應該使用ng-click :) –

我也會使用$ compile函數將HTML元素添加到DOM，因爲它們不是範圍的一部分。 http://docs.angularjs.org/api/ng.$compile –

在angularjs上傳播事件

回答

相關問題