AngularJSで次の兄弟HTMLコンテンツをコピーする

オーバーレイ要素をクリックしてstartCopying（）メソッドを呼び出すたびに、copyTextTagのテキストをpasteTextTag要素にコピーする必要があります。AngularJSで次の兄弟HTMLコンテンツをコピーする

テキストはHTML形式でコピーし、HTML形式で貼り付ける必要があります。また、複数のcopyTextTagがありますが、pasteTextTagは1つなので、クリックしたオーバーレイのテキストのみをコピーする必要があります。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  
};

出典

2016-09-20 Wasim Mulla

私は期待どおりに動作しているフィドルを作成しました。

https://jsfiddle.net/u1cxe5st/

あなたは下位のdivにテキストを与えていないため、適切な場所をクリックしてクリックイベントを発生させませんでした。あなたはこれを試すことができ

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

出典

2016-09-20 07:16:54

をクリックするたびに、私はちょうどあなたが –

は、私が提供しているリンクにアクセスしてくださいDIVれるテキストを貼り付けている私が書かれており、その作業をしていないコードを、見ていますそのスコープの変数を割り当てます左上隅にHTMLが表示され、左下に角度コードが表示されます。右下にHTMLに基づいて生成された出力があります。 'Click me'をクリックすると、chrome consoleに出力が表示されます。 –

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

出典

2016-09-20 07:40:21

作品gr8。ありがとうございます。ラーマン –

ようこそ。 –

バインド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/

出典

2016-09-20 07:49:33 azad

これもうまくいきますが、ここで問題となるのは、コンテンツをHTMLとしてコピーできないだけで、コンテンツをテキストとしてコピーすることだけです。 htmlタグでさえ単純なテキストとしてコピーされます。 –

AngularJSで次の兄弟HTMLコンテンツをコピーする

答えて

関連する問題