Angular-ui bootstrap modal: исчезает после обновления модели от ajax

Question

Я работаю над шаблонами, используя угловой ui bootstrap (ui.boostrap.modal). Данные {{property}} создаются из запросов Ajax.

<!-- template for the modal box--> 
    <div><a data-toggle="modal" href="#{{property.domId()}}" 
      class="btn btn-default">{{property.label}}</a></div> 
     <div id="{{property.domId()}}" 
      class="modal fade" role="dialog"> 
      <div class="modal-dialog"> 
       <div class="modal-content"> 
       <div class="modal-body"> 
        <div class="row"> 
         <div class="col-md-12 panel panel-info"> 

          <div class="panel-heading"> 
         <span tooltip-placement="bottom" 
           tooltip-html-unsafe="{{property.tooltip}}"> 
           {{property.label}}</span> 
          </div> 
          <div class="panel-body"> 
           <div ng-repeat="property in property.value"> 
             <div ng-include="property.templateUrl"> 
             </div> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
       <div class="modal-footer"> 
        <button class="btn btn-default" data-dismiss="modal">Close</button> 
       </div> 
       </div> 
      </div> 
     </div> 

Некоторые кнопки в модальном окне обновляют модель в $ scope и т. Д.

Проблема заключается в следующем: после возвращения из обещания ajax, DOM начнет перестраивать модальную коробку. В какой-то момент, глубоко в $ digest, он не может отобразить элемент, а модальное окно исчезает. Он оставляет только тени заднего плана (что не позволяет мне щелкнуть что-либо).

<div class="modal-backdrop fade in"></div> 

В Инструментах разработчика вы можете видеть, что общая DOM полностью разрешена угловым.

Answer 1

Я отвечу на свои вопросы, потому что это может помочь позже. На самом деле это не так, как ui-bootstrap использует Bootstrap 3 CSS. HTML-код работал с AngularJS, потому что я все еще использую bootstrap.js XD. Модальное отображение было загружено Bootstrap3 ... Вот как это можно сделать с одним и тем же прецедентом.

Код JS: создать функцию open() для запуска Modal. Должен поставлять шаблон и контроллер. Я передаю $ сферу как сферу из-за моего конкретного сценария использования (не скопировать этот код, без понимания областей)

$scope.open = function() { 
     var modalInstance = $modal.open({ 
      templateUrl: 'modalContent.html', 
      controller: 'ModalInstanceController', 
      scope: $scope 
     }); 
    }; 

}]); 

Второй контроллер ModalInstanceController это один «внутри» модальное окно. Вы должны ввести объем и созданный модальный.

В парциальное, вы можете создать шаблон инлайн с text/ng-template. Модаль «внутри» этого скрипта. Последняя кнопка открывает модальный режим с открытым() с основного контроллера. В стандартном BS3 у вас есть кнопка, ориентированная на мода id. Здесь вам нужно вызвать метод open(). Это основное обходное решение, которое вы должны выполнить в своем HTML.

<div> 
    <script type="text/ng-template" id="modalContent.html"> 
     <div class="modal-header">{{property.label}} 
     </div> 
     <div class="modal-body"> 
      <div class="row"> 
       <div class="col-md-12 panel panel-info"> 

        <div class="panel-heading"> 
       <span tooltip-placement="bottom" 
         tooltip-html-unsafe="{{property.tooltip}}"> 
         {{property.label}}</span> 
        </div> 
        <div class="panel-body"> 
         <div ng-repeat="property in property.value"> 
          <div ng-include="property.templateUrl"> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="modal-footer"> 
      <button class="btn btn-primary" ng-click="close()">OK</button> 
      <button class="btn btn-warning" ng-click="cancel()">Cancel</button> 
     </div> 
    </script> 

    <button class="btn btn-default" ng-click="open()">Open</button> 
</div>