Home/ Questions/Q 8739237
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T10:53:37+00:00

I am implementing a web app using angularjs (first time for me). One of

  • 0

I am implementing a web app using angularjs (first time for me). One of the feature I would like to provide the user with is to create a div in the main window when the user click on an image in the menu.

For that, I have created a directive as shown below.

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

And here is the following html code:

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

The problem is that the onClick event triggered on an element looks to be propagated to all its ancestors. Indeed, wherever I click on, the div is created. It is not the expected behaviour since the div should be created only when the user click on image where the directive is.

Additionally, when clicking, the directive is executed as many times as there are images with the directive attribute.

Here is a fiddle to illustrate my problem : http://jsfiddle.net/6Ku7D/10/

One solution would be to use the ng-click directive but it will imply doing some DOM modifications within the controller (and it is not the proper way to achieve my goal). Directive is thus the solution but I am getting stuck.

EDIT (EXTRA INFORMATION)

Actually, it is just the skeleton of what I want to do. In a nutshell, elements I want to click on are in the menu of my app. These elements are simply names of some objects. By clicking on them, I want to create a div that will not contain only the name but other information on this object that can be edited. Moreover, the div I will create should be draggable (using jquery-ui) and finally, I should be able to "link" these divs to create a workflow. Actually, what I want to do is something quite similar to yahoo pipes (providing a user-friendly interface for mashup/workflow edition) but dedicated to researchers in computer science (data mining). Objects will be algorithms, datasets or visualization techniques that have been first imported via a web service I have developped. Consequently, it is not as simple as "adding a value to an existing array". Do you still think I should use ng-click?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This is a Jquery event issue…

    try using stopPropagation() to keep the event from bubbling.

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

    EDIT

    I see what you’re trying to do, and here is a working Plunk that does what you’re trying to do… that said, I don’t think you’re going about this the best way.

    If you want to add a new value to a list of values in Angular, I think you’re going about it the hard way. Then again I don’t know what your end goal is… but try this instead:

    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>

    The JS:

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

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