Angularjsで段落のボタンを動的に作成する

Question

contenteditable divの内部に作成された各段落のボタンを動的に作成したいとします。私はたくさんのことを考えており、良い解決策を考え出すことはできません。私が考えたものは、1つの命令にまとめボタンや段落を入れ

1. で、編集可能なコンテンツが新しい<button+p>タグにユーザーのヒットが戻るたびに追加しています。これは、ボタンと段落の両方が同じコントローラを使用する利点がありますが、編集可能なdivの内容編集可能なdivにボタンを残すので、削除できます。

2. モデルを使用して、すべての段落div内で、この配列内の各段落のボタンを作成します。私の質問はここです：モデルを新しい段落で更新すると、ボタンが自動的に生成されますか？ ng-repeatを使用している場合は、

私はこれに近づくための最善の方法を失っています。ボタンと段落を一緒に作るべきですか？または、ボタンをクリックしたときに段落のスタイリングを変更できるように、それらを分離するより良い方法がありますが、それらを一緒にバインドしますか？

Answer 1

ディレクティブを作成してdivに関連付けます。 例： div内に作成されたp要素を追跡し、ビューに関連付けられたコントローラから渡されるパラメータを双方向データバインディングでバインドするように定義します。

$要素のディレクティブのリンク関数内に挿入します。 次にdivの編集を検出するために、contenteditable入力イベントでdivにバインドします。 このコードの中で、divのp個の子要素の合計数を取得し、それをディレクティブから許可された変数に関連付けます。 このように、パラメータはdiv内のpの数と常に同期し、外部から渡すので、外部スコープからアクセスすることができます。

あなたのビューの内側では、ディレクティブで渡されたこのパラメータをng-repeatで繰り返し、ng-repeatの中に動的コンテンツを作成します。

HTMLコード：

ここ

<div ng-app="myApp"> 
    <div ng-controller="Controller"> 
    <div contenteditable="true" p-inspector p-elements="pElementsNumber"> 
     TEST 
    </div> 
    {{pElementsNumber}} 
    <div ng-repeat="p in returnArrayFromNumber() track by $index"> 
     P detected 
    </div> 
    </div> 
</div> 

JSコード：ここで

angular.module('myApp', []) 
.controller('Controller', ['$scope', function($scope) { 
    $scope.pElementsNumber = 0; 
    $scope.returnArrayFromNumber = function() { 
    return new Array($scope.pElementsNumber); 
    }; 
}]) 
.directive('pInspector', function($rootScope) { 
    return { 
    restrict: 'A', 
    scope: { 
     pElements: '=' 
    }, 
    link: function ($scope, $element, $attrs) { 
     $element.on("input", function(e) { 
     var htmlString = $element.text(); 
     var regex = /<p>[^<p><\/p>]*<\/p>/gi, result, count = 0; 
     var count = 0; 
     while ((result = regex.exec(htmlString))) { 
      count++; 
     } 
     $scope.pElements = count; 
     $rootScope.$apply(); 
     }); 
    } 
    }; 
}); 

実行している例：https://jsfiddle.net/a0jwmpy4/81/

ちょうど1つの勧告：あなたはより多くの要素を検出したい場合は、これを作りますパラメータ内の要素の名前を動的に受け取り、それらのすべてを検出するディレクティブです。あなたはdivの内側に検出するすべての要素のための単一のディレクティブを作成しないでください:)

希望これは

Answer 2

あなたは、各リピート何かにすべてのコードを設定し、各段落/モーダルためng-repeatを使用しようとしましたができます

<div> 
<p ng-repeat="paragraph in paragraphs"> {{contentsOfParagraph}} <button ng-click="editParagraph(MayBeIDOfParagraph)">Edit</button></p> 
</div> 

以下のように今、あなたのjsのコードは、あなたがこれまでに試してみました何ParagraphID