爲Angularjs動態創建段落按鈕

我想爲contenteditable div中創建的每個段落動態創建按鈕。我一直在想很多，不能提出一個好的解決方案。我想過的事情爲Angularjs動態創建段落按鈕

把按鈕和段落連成一個指令，並具備可編輯的內容添加新<button+p>標籤每次用戶點擊返回。這有利於按鈕和段落都使用相同的控制器，但它將內容中的按鈕留在可編輯div中，因此它可以被刪除...
使用模型來維護所有段落的數組在div中，然後爲此數組中的每個段落創建按鈕。我的問題是：如果我用新段落更新模型，按鈕是否會自動生成？如果我使用ng-repeat？

我有點失去了最好的方法來處理這個問題。我應該嘗試一起構建按鈕和段落嗎？或者是有更好的方法來分離它們，但將它們綁定在一起，這樣當按鈕被點擊時，我可以改變段落的樣式？

2017-05-03 Tevon Strand-Brown

你嘗試過這麼遠嗎？ – alphapilgrim

創建一個指令並將其關聯到您的div。例如：定義爲使用雙向數據綁定綁定參數，這些數據綁定將跟蹤在div內創建的p元素並將從與視圖關聯的控制器傳遞。

注入到您的$ element指令的鏈接函數中。然後通過contenteditable輸入事件綁定到div，以檢測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/

只是一個建議：如果你想探測更多的元素，使這個指令動態接受參數中元素的名稱並檢測所有元素的名稱。請不要創造你想要的DIV :)

希望這有助於內部檢測每一個元素的單指令

來源

2017-05-03 00:45:15 quirimmo

謝謝！這真的有幫助，如果你可以添加那個很棒的代碼示例！ –

不客氣:)一旦完成工作，我會添加一個代碼示例鏈接到jsfiddle – quirimmo

添加了示例代碼。對於每一個問題，讓我知道:) – quirimmo

您是否嘗試過使用ng-repeat每個段落/莫代爾然後將所有的代碼在每個重複的東西像下面

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

現在你的js代碼將有一個功能editParagraph是通過ParagraphID

來源

2017-05-03 00:46:14

我還沒有嘗試過，但我喜歡這個想法。然而，這裏的問題是我希望所有不同的段落都包含在一個可以理解的div中，以便它作爲一個單獨的文檔是內聚的。如果所有段落都是分開的，這個方法就可以工作，但是如果它們是用戶在contentEditable中返回時創建的，它會起作用嗎？ –

爲Angularjs動態創建段落按鈕

回答

相關問題