1

我目前正在尝试在单击“添加”按钮时动态添加新的 textAngular。

由于 HTML 页面中已经存在第一个 textAngular 元素，因此使用所见即所得函数初始化工作正常，我可以使用工具栏并在相应的 textarea 中查看结果。

加载页面时初始化的第一个 textAngular 编辑器

当我单击“添加”按钮时，我想要另一个 textAngular 编辑器及其相应的 textarea，我设法拥有并初始化它，但是一旦我这样做，以前的 textAngular 编辑器就不起作用并且不是t 不再链接到它的文本区域。工具栏也是不可点击的。

我得到以下结果：

在此处输入图像描述

这是index.html页面的代码：

<body>
<div id="mainContainer">
<div ng-app="textAngularTest" ng-controller="wysiwygeditor" class="container app">
  <div name="cours" id="textbox1">
    <h3>TextBOX 1</h3>
    <div text-angular="text-angular" name="htmlcontent" ng-model="htmlcontent" ta-disabled="disabled"></div>
    <h3>HTML BRUT 1</h3>
    <textarea ng-model="htmlcontent" style="width: 100%"></textarea>
    <br>
    <button id="btn1" onclick="displayEditor()">Add</button>
  </div>
</div>
</div>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular-sanitize.min.js'></script
<script src='https://cdnjs.cloudflare.com/ajax/libs/textAngular/1.1.2/textAngular.min.js'></script
</body>
<!-- partial -->
<script src="./textbox.js"></script>

样式.css：

.ta-editor {
min-height: 300px;
height: auto;
overflow: auto;
font-family: inherit;
font-size: 100%;

}

这是textbox.js的代码：

angular.module("textAngularTest", ['textAngular']);

function wysiwygeditor($scope) {
console.log($scope);
$scope.orightml = 'Hello';
$scope.htmlcontent = $scope.orightml;
$scope.disabled = false;
};

function displayEditor() {
var number = Math.random();

document.getElementById("mainContainer").innerHTML += '<div ng-app="textAngularTest' + number + '" ng-controller="myController' + number + '" class="container app" id="mainContainer' + number + '"><h3>TextBox2</h3><div text-angular="text-angular"  id="htmlcontent" name="htmlcontent" ng-model="htmlcontent" ta-disabled="disabled"></div><h3>HTML BRUT 2</h3><textarea ng-model="htmlcontent" style="width: 100%"></textarea>';


angular.module('textAngularTest' + number, ['textAngular'])
    .controller('myController' + number, function ($scope) {
        $scope.orightml = 'Hey';
        $scope.htmlcontent = $scope.orightml;
    });
angular.bootstrap(document.getElementById('mainContainer' + number), ['textAngularTest' + number]);
}

代码说明：当我单击“添加”按钮时，我构建了新的 textAngular 编辑器的 HTML 及其文本区域，为它们提供了独特的属性，因此它们与以前的属性无关。当我在 DOM 上添加这个新的 HTML 内容时，我用它自己的控制器初始化了新的 angular 模块。但是一旦我这样做并且正如我上面所说的那样，以前的 textAngular 编辑器就不再工作了。

有谁知道如何在不破坏之前的情况下实现该目标并初始化多个 textAngular 编辑器？

4

0 回答 0