Javascript 使用Angularjs动态创建段落按钮

我想为

contenteditable div

中创建的每个段落动态创建一个按钮。我想了很多，没能想出一个好的解决办法。我想到的事情是

将按钮和段落放在一个指令中，并使内容可编辑，每次用户点击return时添加一个新的

标记。这样做的好处是，按钮和段落都使用同一个控制器，但它将按钮保留在“内容可编辑”div中，因此可以将其删除

使用该模型维护div中所有段落的数组，然后为此数组中的每个段落创建按钮。我的问题是：如果我用新段落更新模型，按钮会自动生成吗？如果我使用ng重复

---

我有点不知所措，没有最好的方法来解决这个问题。我是否应该尝试将按钮和段落构建在一起？或者有没有更好的方法将它们分开，但将它们绑定在一起，以便在单击按钮时可以更改段落的样式？

创建一个指令并将其与您的div关联。 前任： 定义为使用双向数据绑定绑定参数，这些参数将跟踪在div内创建的p元素，并从与视图关联的控制器传递

在指令的link函数中注入$element。 然后使用contenteditable和input事件绑定到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>

试验
{{pElementsNumber}}
检测到P

下面是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();
      });
    }
  };
});

angular.module（'myApp'，[]）
.controller（'controller'，['$scope'，function（$scope）{
$scope.pElementsNumber=0；
$scope.returnArrayFromNumber=函数（）{
返回新数组（$scope.pElementsNumber）；
};
}])
.directive（'pInspector'，function（$rootScope）{
返回{
限制：“A”，
范围：{
元素：'='
},
链接：函数（$scope、$element、$attrs）{
$element.on（“输入”，函数（e）{
var htmlString=$element.text（）；
var regex=/[^]*/gi，结果，计数=0；
var计数=0；
while（（result=regex.exec（htmlString）））{
计数++；
}
$scope.pElements=计数；
$rootScope.$apply（）；
});
}
};
});

下面是运行示例：

只有一个建议：如果您想检测更多的元素，请将此指令设置为动态的，接受参数中元素的名称并检测所有元素。请不要为要在div内检测的每个元素创建单个指令：）

---

希望这有帮助

您是否尝试对每个段落/模式使用

ng repeat

，然后在每个重复中设置所有代码，如下所示

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

{{contentsofparagration}编辑

---

现在，您的js代码将有一个函数

editParagraph

，该函数传递

ParagraphID

，我还没有尝试过，但我喜欢这个想法。但这里的问题是，我希望所有不同的段落都包含在一个contenteditable div中，这样它就可以作为一个文档进行内聚。如果所有段落都是独立的，那么这种方法会起作用，但是如果它们是用户在contentEditable中点击return时创建的，那么这种方法会起作用吗？谢谢！这真的很有帮助，如果您可以添加代码示例，那就太好了！不客气：）完成工作后，我将向您添加一个链接到jsfiddle的代码示例并添加示例代码。对于每个问题，请让我知道：）