0

我正在使用 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），最后，我应该能够“链接”这些 div 以创建工作流。实际上，我想做的是与雅虎管道非常相似的东西（为混搭/工作流版本提供用户友好的界面）但专用于计算机科学（数据挖掘）的研究人员。对象将是算法、数据集或可视化技术，它们首先通过我开发的 Web 服务导入。因此，它并不像“向现有数组添加值”那么简单。你还认为我应该使用 ng-click 吗？

4

2 回答 2

3

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

编辑

我明白你想要做什么，这里有一个工作 Plunk可以做你想做的事情......也就是说，我认为你不是最好的方法。

如果您想在 Angular 中的值列表中添加一个新值，我认为您将很难做到这一点。再说一次，我不知道你的最终目标是什么......但试试这个：

这是我建议的解决方案

<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-24T13:17:21.303 回答
0

我会使用 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 代码：

<img class="imgMenu" src="styles/img/logo_add.png" add-element ng-click="createElement()" />
于 2012-10-24T15:06:58.507 回答