TinyMCE doesn't initialize using ng-repeat

Question

I have a problem when I want to append a textarea linked to tinyMCE wysiwyg. tinyMCE don't have time to initialize so maybe the solution is to wait the end of the ng-repeat. But I don't now how and tinyMCE is not using angular so..

Need your help.

Have a good time.

Answer 1

Take a Look at this

Working Demo

html

<div ng-app="myApp" ng-controller="PostController">
    <br/>
    <textarea ng-model="mypost" ui-tinymce="tinymceOptions"></textarea>
    <br/>
    <input type="button" value="Submit" ng-click="submit()"/>
    <br/>
    <ul>
        <li ng-repeat="post in posts | orderBy:orderProp:true">
            <input type="button" value="Edit" ng-click="edit=!edit;newpost=post.content"/>
            <input ng-hide="edit" type="button" value="Delete" ng-click="deletepost(post)"/>
            <br />
            <div ng-hide="edit" style="white-space: pre-wrap"><ANY ng-bind-html-unsafe="post.content"></ANY></div>
            <div ng-show="edit">
                <textarea ng-model="newpost" ui-tinymce="tinymceOptions"></textarea>
                <input type="button" value="Submit" ng-click="editpost(post, newpost);edit=!edit" />
            </div>
            <br /><br /><br/>
        </li>
    </ul>
</div>

script

var myApp = angular.module('myApp', ['ui.tinymce']);

function PostController($scope) {
    $scope.posts = [];
    $scope.time = 1;
    $scope.orderProp = 'pseudo_time';

    $scope.tinymceOptions = { menubar: false };

    $scope.submit = function() {
        newpost = {"content": $scope.mypost, "pseudo_time": $scope.time++};
        $scope.posts.push(newpost);
    };
    $scope.editpost = function(post, newpost) {
        var index = jQuery.inArray(post, $scope.posts);
        $scope.posts[index].content = newpost;
    };
    $scope.deletepost = function(post) {
        if (confirm("Delete Answer?") == true) {
            var index = jQuery.inArray(post, $scope.posts);
            $scope.posts.splice(index, 1);
        }
    };
}