Html angularjs上的事件传播

我正在使用angularjs实现一个web应用程序（这是我第一次）。我想为用户提供的一个功能是，当用户单击菜单中的图像时，在主窗口中创建一个div

为此，我创建了一个指令，如下所示

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);
    } 
});

var platform=angular.module（'platform'，[]）；
指令（'addElement'，function（））{
返回函数（范围、元素、属性）{
var-createElement；
createElement=函数（）{
$（'Test'）。附加到（'body main window'）；
};
$（此）.on（'click'，createElement）；
} 
});

下面是以下html代码：

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

问题在于，在元素上触发的onClick事件似乎传播到了它的所有祖先。实际上，无论我在哪里单击，都会创建div。它不是预期的beahvior，因为只有当用户单击指令所在的图像时才应该创建div

此外，单击时，指令的执行次数与具有指令属性的图像的执行次数相同

这里有一把小提琴来说明我的问题：

一种解决方案是使用ng click指令，但它将意味着在控制器中进行一些DOM修改（这不是实现我的目标的正确方法）。因此，指令是解决方案，但我被绊倒了

致意

编辑（额外信息）

---

事实上，这只是我想做的事。简而言之，我想点击的元素在我的应用程序的菜单中。这些元素只是一些对象的名称。通过单击它们，我希望创建一个div，该div不仅包含名称，还包含此对象上可编辑的其他信息。此外，我将创建的div应该是可拖动的（使用jqueryui），最后，我应该能够“链接”这些div以创建工作流。事实上，我想做的事情与（为mashup/workflow版本提供一个用户友好的界面）非常相似，但专门针对计算机科学（数据挖掘）的研究人员。对象将是首先通过我开发的web服务导入的算法、数据集或可视化技术。因此，它不像“向现有数组添加值”那么简单。你还认为我应该使用ng click吗

这是一个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);
    } 
});

---

这是一个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);
    } 
});

---

我会使用ng click。我不知道为什么这意味着要通过控制器进行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');
        };

    } 
});

var platform=angular.module（'platform'，[]）；
指令（'addElement'，function（））{
返回函数（范围、元素、属性）{
scope.createElement=函数（）{
$（'Test'）。附加到（'body main window'）；
};
} 
});

HTML代码：

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

---

我会使用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');
        };

    } 
});

var platform=angular.module（'platform'，[]）；
指令（'addElement'，function（））{
返回函数（范围、元素、属性）{
scope.createElement=函数（）{
$（'Test'）。附加到（'body main window'）；
};
} 
});

HTML代码：

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

谢谢您的回复。我已经添加了您建议的行，但问题仍然存在。我已经稍微更改了我的答案，以显示我将如何执行指令声明。如果这不起作用，你将不得不发布一个小提琴或一些更完整的代码，这样我就可以看到发生了什么，你不喜欢。谢谢，我已经更新了我的帖子发布小提琴。fiddle与我想要做的非常相似（只是我调用了一个RESTfulWeb服务来提供数组）。但是很明显，该指令在小提琴中没有被识别（当我点击时不会发生任何事情），而它在我的代码中…我已经用…更新了我的答案。。。两个答案。一个能做你想做的事的人；还有一个能以一种更简单的“角度更大”的方式完成你想做的事情。非常感谢。我已经更新了我的问题，添加了一些关于我的申请需求的额外信息。你能看一下并告诉我ng click解决方案是否仍然更可取吗？谢谢你的回复。我已经添加了您建议的行，但问题仍然存在。我已经稍微更改了我的答案，以显示我将如何执行指令声明。如果这不起作用，你将不得不发布一个小提琴或一些更完整的代码，这样我就可以看到发生了什么，你不喜欢。谢谢，我已经更新了我的帖子发布小提琴。fiddle与我想要做的非常相似（只是我调用了一个RESTfulWeb服务来提供数组）。但是很明显，该指令在小提琴中没有被识别（当我点击时不会发生任何事情），而它在我的代码中…我已经用…更新了我的答案。。。两个答案。一个能做你想做的事的人；还有一个能以一种更简单的“角度更大”的方式完成你想做的事情。非常感谢。我已经更新了我的问题，添加了一些关于我的申请需求的额外信息。您能看一下并告诉我ng click解决方案是否仍然更可取吗？谢谢。我已经更新了我的问题，添加了一些关于我的申请需求的额外信息。您能看一下并告诉我ng-click解决方案是否仍然更可取吗？我仍然会选择ng-click（）。首先，这是最简单的方法（据我所知），您可以在指令中添加无限量的额外处理，或者只需添加一个包含新指令的模板。例如，对于draggability，我将创建一个额外的指令，使该指令的host元素可以被拖动（通过这种方式，您可以轻松地使其他内容也可以被拖动）。总之，我不知道为什么不应该使用ng click:）我也会使用$compile f