Question

我想为contenteditable div内创建的每个段落动态创建一个按钮。我一直在思考，无法想出一个好的解决方案。我想过的事情是

将按钮和段落放在一个指令中并让内容可编辑，每次用户点击返回时都会添加新的<button+p>标记。这样做的好处是，按钮和段落都使用相同的控制器，但它将按钮留在内容可编辑的div中，因此可以将其删除...
使用Model维护div中所有段落的数组，然后为此数组中的每个段落创建按钮。我的问题是：如果我用新段落更新模型，是否会自动生成按钮？如果我使用ng-repeat？

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

Answer 1

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

在$元素的指令的链接函数中注入。然后绑定到具有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中要检测的每个元素创建单个指令：）

希望这有帮助

Answer 2

您是否尝试为每个段落/模式使用ng-repeat，然后在每个段落/模式中设置所有代码

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

现在你的js代码将有一个传递editParagraph

的函数ParagraphID

使用Angularjs动态创建段落按钮

2 个答案: