如何结合ng-repeat使用Quill编辑器？解决容器无效报错

踩过这个坑的人来给你支招！你遇到的quill Invalid Quill container报错，核心原因非常明确：你在AngularJS的ng-repeat还没完成DOM渲染的时候，就急着初始化Quill编辑器了。

问题根源分析 #

你的代码逻辑是：

1. 通过$http请求拿到数据，赋值给$scope.postsProfile
2. 立刻循环创建Quill实例，试图找到#content{post.id}的容器

但AngularJS的ng-repeat是异步渲染DOM的——你给$scope.postsProfile赋值后，Angular不会立刻把所有<div id='content{{post.id}}'>渲染到页面上，而是要等到下一个digest周期才会完成DOM更新。这时候你去调用new Quill()，自然找不到对应的容器元素，就会抛出"Invalid Quill container"错误。

最佳解决方案：用ng-quill自带的指令（推荐） #

既然你已经引入了ng-quill，完全不需要手动创建Quill实例！它本身提供了指令来帮你处理DOM异步的问题，还能自动实现数据绑定。

修改你的代码如下：

HTML部分

<div ng-repeat="post in postsProfile" >
    <!-- 只给type_id=1的帖子渲染编辑器 -->
    <div class='postcontent' 
         ng-quill-editor="editorOptions" 
         ng-model="post.parsedContent"
         ng-if="post.type_id == 1"></div>
</div>

JS控制器部分

// 先定义Quill编辑器的配置（就是你原来的optionwall）
$scope.editorOptions = {
    theme: 'snow', // 举个例子，替换成你的实际配置
    // 其他配置项...
};

$http.post("/getwallpost", reqGetPost).then(function(response) {
    // 处理数据：把JSON字符串格式的content解析成对象，给ng-quill绑定
    $scope.postsProfile = response.data.map(post => {
        if (post.type_id == 1) {
            // 解析content为Quill能识别的格式
            post.parsedContent = JSON.parse(post.content);
        }
        return post;
    });
});

这样ng-quill会自动在ng-repeat完成DOM渲染后，为每个符合条件的元素初始化Quill编辑器，还能双向绑定数据，完全规避了DOM异步的问题，代码也更简洁规范。

备选方案：手动初始化时用$timeout等待DOM渲染 #

如果你坚持要手动创建Quill实例，可以用Angular的$timeout服务延迟初始化代码，确保ng-repeat已经把DOM渲染完成：

// 记得要在控制器里注入$timeout服务！
app.controller('YourController', ['$scope', '$http', '$timeout', function($scope, $http, $timeout) {
    $http.post("/getwallpost", reqGetPost).then(function(response) {
        $scope.postsProfile = response.data;
        
        // 用$timeout延迟执行，等待ng-repeat完成DOM渲染
        $timeout(function() {
            var accounts = [];
            for (var i = 0; i < response.data.length; ++i) {
                if(response.data[i].type_id == 1) {
                    var container = document.getElementById("content" + response.data[i].id);
                    // 先检查容器是否存在，避免不必要的报错
                    if (container) {
                        accounts[i] = new Quill(container, optionwall);
                        accounts[i].setContents(JSON.parse(response.data[i].content));
                    }
                }
            }
        });
    });
}]);

进阶方案：自定义指令监听元素渲染 #

如果你的场景更复杂，还可以写一个自定义指令，在元素被渲染到DOM时自动初始化Quill：

自定义指令

app.directive('customQuillEditor', function() {
    return {
        scope: {
            content: '=',
            options: '='
        },
        link: function(scope, element) {
            // 当元素渲染完成后，初始化Quill
            var quill = new Quill(element[0], scope.options);
            // 设置内容
            if (scope.content) {
                quill.setContents(JSON.parse(scope.content));
            }
        }
    };
});

HTML使用

<div ng-repeat="post in postsProfile" >
    <div class='postcontent' 
         custom-quill-editor 
         content="post.content" 
         options="optionwall"
         ng-if="post.type_id == 1"></div>
</div>

以上三种方案都能解决你的问题，优先推荐第一种——毕竟用官方提供的工具是最省心的！

内容的提问来源于stack exchange，提问作者Ke Vin