Динамически добавлять и инициализировать несколько текстовых редакторов, используя textAngular - PullRequest
Новая
       20

Динамически добавлять и инициализировать несколько текстовых редакторов, используя textAngular

1 голос
/ 18 марта 2020

Я сейчас пытаюсь динамически добавить новый текст Angular при нажатии на кнопку «Добавить».

Поскольку первый элемент Angular текста уже присутствует на странице HTML, инициализация работает нормально, используя функцию wysiwyg, и я могу использовать панель инструментов и увидеть результат в соответствующей текстовой области.

First textAngular editor initialised when the page is loaded

Когда я нажимаю на кнопку «Добавить», я хотел бы иметь еще один текстовый редактор Angular вместе с соответствующим ему текстовым пространством, которое мне удалось получить и инициализировать, но как только я сделаю это, предыдущий текстовый редактор Angular не будет работать и больше не связан с его текстовой областью. Панель инструментов также неактивна.

Я получаю следующий результат:

enter image description here

Вот код индекса . 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%;

}

А вот код текстовое поле. 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]);
}

Объяснение кода: Когда я нажимаю кнопку «Добавить», я строю HTML нового текста Angular редактор и его текстовое поле дают им уникальные атрибуты, поэтому они не зависят от предыдущих. Когда я добавляю этот новый контент HTML в DOM, я инициализирую новый модуль angular с собственным контроллером. Но как только я это сделаю и, как я сказал выше, редакторы предыдущего текста Angular больше не работают.

Кто-нибудь знает, как достичь этой цели и инициализировать несколько текстовых Angular редакторов, не нарушая предыдущие?

...