我想为在contenteditable div 中创建的每个段落动态创建一个按钮。我想了很多，也想不出一个好的解决办法。我想到的事情是
将按钮和段落放在一个指令中，并让内容可编辑，每次用户点击返回时添加一个新的<button+p> 标签。这样做的好处是按钮和段落都使用相同的控制器，但它将按钮留在内容可编辑的 div 中，因此可以将其删除...
使用模型维护 div 中所有段落的数组，然后为该数组中的每个段落创建按钮。我的问题是：如果我用新段落更新模型，按钮会自动生成吗？如果我使用 ng-repeat？
我有点不知道解决这个问题的最佳方法。我应该尝试一起构建按钮和段落吗？还是有更好的方法将它们分开但将它们绑定在一起，以便在单击按钮时我可以更改段落的样式？
【问题讨论】：
标签： javascript html angularjs
创建一个指令并将其关联到您的 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 中检测的每个元素创建一个指令 :)
希望对你有帮助
【讨论】：
您是否尝试过为每个段落/模态使用ng-repeat，然后在每个重复中设置所有代码，如下所示
<div>
<p ng-repeat="paragraph in paragraphs"> {{contentsOfParagraph}} <button ng-click="editParagraph(MayBeIDOfParagraph)">Edit</button></p>
</div>
现在你的 js 代码将有一个函数 editParagraph 传递 ParagraphID
【讨论】：