I'm currently trying to dynamically add a new textAngular when clicking on the "Add" button.
As the first textAngular element is already present in the HTML page, the initialisation works fine using wysiwyg function and I'm able to use the toolbar and see the result in the corresponding textarea.
When I click on the "Add" button, I would like to have another textAngular editor along with its corresponding textarea, which I manage to have and to initialise but as soon as I do this the previous textAngular editor doesn't work and isn't linked to its textarea anymore. The toolbar is also unclickable.
I get the following result :
Here's the code of the index.html page :
<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>
The style.css:
.ta-editor {
min-height: 300px;
height: auto;
overflow: auto;
font-family: inherit;
font-size: 100%;
}
And here is the code of 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]);
}
Explanation of the code : When I click on the "Add" button, I build the HTML of the new textAngular editor and its textarea giving them unique attributes so they are independant with the previous ones. When I add this new HTML content on the DOM, I initialise the new angular module with its own controller. But as soon as I do this and as I said it above, the previous textAngular editors don't work anymore.
Does anyone know how to reach that goal and initialise multiple textAngular editors without breaking the previous ones ?
