Question

我正在使用angularjs实现一个网络应用程序（第一次为我）。我想为用户提供的功能之一是当用户单击菜单中的图像时在主窗口中创建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);
    } 
});

以下是html代码：

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

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

此外，单击时，指令的执行次数与指令属性的图像一样多次。

这是一个解释我的问题的小提琴：http://jsfiddle.net/6Ku7D/10/

一种解决方案是使用ng-click指令但它意味着在控制器中进行一些DOM修改（并且它不是实现我的目标的正确方法）。因此，指令就是解决方案，但我却陷入困境......

祝你好运

编辑（附加信息）

实际上，这只是我想要做的事情的细节。简而言之，我要点击的元素位于我的应用程序的菜单中。这些元素只是某些对象的名称。通过单击它们，我想创建一个div，它不仅包含名称，而是包含可以编辑的此对象的其他信息。此外，我将创建的div应该是可拖动的（使用jquery-ui），最后，我应该能够＃34;链接＆＃34;这些div创建了一个工作流程。实际上，我想要做的是与yahoo pipes非常相似（为mashup /工作流版本提供用户友好的界面），但致力于计算机科学（数据挖掘）的研究人员。对象将是首先通过我开发的Web服务导入的算法，数据集或可视化技术。因此，它并不像在现有数组中添加值那么简单＆＃34;。你还认为我应该使用ng-click吗？

Answer 1

这是一个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做了你想要做的事情......那就是说，我认为你不是最好的方式。< / p>
如果你想在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'); }; });

Answer 2

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

    } 
});

HTML code：

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

在angularjs上的事件传播

2 个答案: