Question

每当单击overlay元素并调用startCopying（）方法时，copyTextTag中的文本应复制到pasteTextTag元素中。

文本应以HTML格式复制并粘贴为HTML格式。此外，还有多个copyTextTag，但pasteTextTag是一个，因此必须仅复制单击的叠加层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       
};

Answer 1

你可以试试这个...... 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>

Answer 2

将粘贴文本与html模板绑定。每次点击都分配该范围变量

<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/

Answer 3

我创造了一个按预期工作的小提琴。

https://jsfiddle.net/u1cxe5st/

您没有在下面的div中提供任何文字，因此您没有点击正确的位置来点击点击事件。

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

在AngularJS中复制下一个兄弟html内容

3 个答案: