LINUX.ORG.RU

AngularJS вызвать инициализацию DOM элементов

 , ,


0

1

Здравствуйте.

Правлю один сайт, написан он очень криво, но переписывать все не выгодно и геморно.

Суть вороса (пожалуйста не говорите, что это хрень полная, но просто воспримите это как «задачу»).

Есть контроллер на ангуляре:

.....

.controller("thumbController", function($scope,$mdDialog,$http,$rootScope) {
                   $scope.removeImage=function(ev, id) {
                    var confirm = $mdDialog.confirm()
                          .title('ВНИМАНИЕ')
                          .textContent('Вы действительно хотите удалить фотографию?')
                          .ariaLabel('Удаление фото')
                          .targetEvent(ev)
                          .ok('Удалить')
                          .cancel('Отмена');

                    $mdDialog.show(confirm).then(function() {
                      $http.post("api/img", {
                        type: 'delete', id: id
                      })
                      .then(function(res) {
                        $('#thumb-service-image-'+id).remove();
                      });
                    }, function() {  });
                   }
....

Этот код в шаблоне. Есть страница с этим контроллером, в нее добавляются DOM элементы, при клике на кнопку удалить, вызывается $scope.removeImage(...) и все работает.

НО. Где-то на этой странице, еще кто-то хз кто, реализовал UPLOAD картинки на jQuery и все работает, действительно хорого. После загрузки изображения, создается динамически DOM элемент в котором есть так-же атрибут ng-click=«$scope.removeImage(...)» НО, т.к. он добавился через jQuery, ангуляр про него ничего не знает, соответственно функция уже не сработает, пока не перезагрузить страницу.

Как заставить AngularJS перечитать ng-click'и элементов???

пробовал добавить такой трюк:

var lastNumbThumb = $('#portlet-sortable-img .portlet').length;
                   function applyThumb() {
                     setTimeout(function() {
                        if(lastNumbThumb!=$('#portlet-sortable-img .portlet').length) {
                          lastNumbThumb=$('#portlet-sortable-img .portlet').length;
                          $scope.$apply();
                        }
                           applyThumb();
                     },1000);
                     applyThumb();
                   }

но не работает.. ;(

Такой вариант не подойдёт: добавь контроллеру массив типа $scope.files = [];, после загрузки файла пушишь в него элемент, а во вьюхе через ng-repeat всё это дело выводишь?

neversleep ★★ ()

да уж, ну и костыль. в ангуляре dom иным способом кроме как через ангуляр лучше вообще не трогать. проблем не оберёшься. исходный html со всеми этими директивами ng-* для него идёт как шаблон, который он рендёрит после загрузки. а то что отображается в браузере - результат рендёринга. соответственно ты никак не заставишь его из результата рендёринга читать директивы для шаблона.

eternal_sorrow ★★★★★ ()
Последнее исправление: eternal_sorrow (всего исправлений: 1)