Как использовать ng-repeat с редактором quill - PullRequest
Новая
       10

Как использовать ng-repeat с редактором quill

0 голосов
/ 22 мая 2018

Привет, я пытаюсь использовать Quill Editor js и использовать его с повторением ng.(Я получил ng quill) Мне нужно использовать ng repeat.

Этот код возвращает мне ошибку типа:

quill Invalid Quill container # content245

quill Invalid Quill container # content244

quill Invalid Quill container # content243 ....

Мне нужна ваша помощь! 

        $http.post("/getwallpost", reqGetPost).then(function(response) {
            var accounts = [];
            $scope.postsProfile = response.data
            
            for (var i = 0; i < response.data.length; ++i) {
                if(response.data[i].type_id == 1) {
                     accounts[i] = new Quill("#content" + response.data[i].id + "", optionwall);
                     accounts[i].setContents(JSON.parse(response.data[i].content))
                     
                }
            }
        });
<div ng-repeat="post in postsProfile" >
  <div class='postcontent' id='content{{post.id}}'></div>
</div>

Ответы [ 2 ]

0 голосов
/ 23 мая 2018

Я нашел другой способ сделать это, потому что кажется невозможным использовать ng-repeat с quill (или я не знаю ответа) Я использовал функцию добавления Jquery.Но вы должны использовать компилятор angularJS ($ compile) для компиляции html

. Вы можете проверить больше об этом: добавьте html, включающий ng-click в angularjs

это просто и работает отлично

0 голосов
/ 22 мая 2018

Я бы попробовал добавить ng-if к повтору 

 $http.post("/getwallpost", reqGetPost).then(function(response) {
            var accounts = [];
            $scope.postsProfile = response.data

            for (var i = 0; i < response.data.length; ++i) {
                if(response.data[i].type_id == 1) {
                     accounts[i] = new Quill("#content" + response.data[i].id + "", optionwall);
                     accounts[i].setContents(JSON.parse(response.data[i].content))

                }
            }
            $scope.showRepeat = true;
    });



<div ng-repeat="post in postsProfile" ng-if="showRepeat">
  <div class='postcontent' id='content{{post.id}}'></div>
</div>

РЕДАКТИРОВАТЬ

также может быть противоположной проблемой.

Вы также должны попытаться вызвать новый Quill при печати последнего повтора ... 

app.directive("lastRepeat", function(){
    return {
        restrict: "A",
        link: function(scope, el, attrs){
            if(scope.$last){
                var eventId = "LR_";
                eventId += !!attrs.lastRepeat ? attrs.lastRepeat : "last";
                scope.$root.$broadcast(eventId);
            }
        }
    };
});

html 

<div ng-repeat="post in postsProfile" ng-if="showRepeat" last-repeat="foo">
  <div class='postcontent' id='content{{post.id}}'></div>
</div>

и в вашем js ... 

 $scope.$root.on("LR_foo", function(){
          var data = angular.copy($scope.postsProfile);
          for (var i = 0; i < data.length; ++i) {
                if(data[i].type_id == 1) {
                     accounts[i] = new Quill("#content" + data[i].id + "", optionwall);
                     accounts[i].setContents(JSON.parse(data[i].content))

                }
            }

 });

 $http.post("/getwallpost", reqGetPost).then(function(response) {
            var accounts = [];
            $scope.postsProfile = response.data


            $scope.showRepeat = true;
    });
...