Copying next sibling html content in AngularJS

Question

Whenever overlay element is clicked and startCopying() method is called, the text from copyTextTag should be copied in the pasteTextTag element.

The text should be copied in HTML format and pasted as HTML format. Also there are multiple copyTextTag but pasteTextTag is one, so the text must be copied only of clicked overlays copyTextTag div.

<div class="col-md-4">
    <div class="copyTextTag">
        svlgmdfgndfjkgndjkgndkjgnerjkgndkgnjdkjgndjkgnffsdf<br/>Test 1          
    </div>
    <div class="overlay" ng-click="homectrl.startCopying($event)"></div>
</div>
<div class="col-md-4">
    <div class="copyTextTag">
        svlgmdfgndfjkgndjkgndkjgnerjkgndkgnjdkjgndjkgnffsdf<br/>Test 1          
    </div>
    <div class="overlay" ng-click="homectrl.startCopying($event)"></div>
</div>


/* Area where the copied text should be pasted */
<div class="pasteTextTag"></div>

/* Angular Code */
function startCopying(evt){     
    console.log(angular.element(evt.currentTarget)) //not working       
};

Azad · Accepted Answer · 2016-09-20 07:49:33Z

1

bind the pasting text with html template. assign that scope variable whenever clicked

<div class="col-md-4">
    <div class="copyTextTag">
        svlgmdfgndfjkgndjkgndkjgnerjkgndkgnjdkjgndjkgnffsdf<br/>Test 1          
    </div>
    <div class="overlay" ng-click="homectrl.startCopying($event)"></div>
</div>
<div class="col-md-4">
    <div class="copyTextTag">
        svlgmdfgndfjkgndjkgndkjgnerjkgndkgnjdkjgndjkgnffsdf<br/>Test 1          
    </div>
    <div class="overlay" ng-click="homectrl.startCopying($event)"></div>
</div>


/* Area where the copied text should be pasted */
<div class="pasteTextTag" ng-bind="paste"></div>

/* Angular Code */
function startCopying(evt){     
    $scope.paste = evt.target.previousElementSibling.innerHTML;     
};

https://jsfiddle.net/ru8tuv1v/

answered Sep 20, 2016 at 7:49

Azad

5,2725 gold badges32 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Wasimakram Mulla Over a year ago

This too works fine but only problem here is I am not able to copy the content as an HTML, it just copies the content as text. Even the html tags are copied as a simple text.

Md Rahman · Accepted Answer · 2016-09-20 08:38:14Z

You can try this... https://jsfiddle.net/x5zfe520/2/

 <!DOCTYPE html>
    <html>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <body>

    <div ng-app="myApp" ng-controller="myCtrl">

    <div class="col-md-4">
        <div class="copyTextTag">
            svlgmdfgndfjkgndjkgndkjgnerjkgndkgnjdkjgndjkgnffsdf<br/>Test 1          
        </div>
        <div class="overlay" ng-click="startCopying($event)">Copy</div>
    </div>
    <div class="col-md-4">
        <div class="copyTextTag">
            svlgmdfgndfjkgndjkgndkjgnerjkgndkgnjdkjgndjkgnffsdf<br/>Test 2          
        </div>
        <div class="overlay" ng-click="startCopying($event)">Copy</div>
    </div>

    /* Area where the copied text should be pasted */
    <div class="pasteTextTag"></div>
    </div>

    <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {       
        $scope.startCopying = function(evt){
         var copiedHtml = angular.element(angular.element(evt.currentTarget).parent('.col-md-4').children()[0]).html();
         console.log(copiedHtml) ;
         angular.element(document.getElementsByClassName("pasteTextTag")).html(copiedHtml);
        }
    });
    </script>

    </body>
    </html>

Deendayal Garg · Accepted Answer · 2016-09-20 07:16:54Z

0

I have created a fiddle which is working as expected.

https://jsfiddle.net/u1cxe5st/

you are not giving any text in the below div , so you were not clicking on the proper place to fire the click event.

<div class="overlay" ng-click="homectrl.startCopying($event)">Click Me</div>

answered Sep 20, 2016 at 7:16

Deendayal Garg

5,1462 gold badges21 silver badges33 bronze badges

2 Comments

Wasimakram Mulla Over a year ago

I am just seeing the code I have written and its not working, where have you pasted the text in which div

Deendayal Garg Over a year ago

go to the link that I have provided, In the top left corner you will see your HTML and in the bottom left corner is your angular code. in the bottom right is the output which is generated based on HTML. if you click on Click me then you will see output in chrome console.

Collectives™ on Stack Overflow

Copying next sibling html content in AngularJS

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related