在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上传播事件

回答

相关问题