Как я могу заполнить Модальные данные с помощью Angular JS?

Question

У меня есть модальный, который открывается в Bootstrap в настоящее время и хочет загрузить его через Angular. Я не могу использовать Angular UI по разным причинам, поэтому this answer, в то время как отличный, не помогает.

В настоящее время я загружаю модальный с: <div class="control-btn"><a href="#myModal" data-toggle="modal">Load</a></div>

Но это не передавая данные, которые мне нужно модальным.

Любая помощь будет принята с благодарностью

Answer 1

Вот что я делал.
Сначала создайте угловой шаблон, который будет вашим модальным всплывающим окном. Сохраните это как html-файл с именем «modalTemplate.html» где-нибудь в вашем каталоге веб-сайта.

<script type="text/ng-template" id="modalTemplate.html"> 
    <h4>welcome to my modal</h4> 
    <div> 
    {{someData}} 
    {{someOtherData}} 
    </div> 
</script> 

Затем создайте отдельный контроллер для управления этим шаблона:

MyApp.app.controller("testModalCtrl", ['$scope', 'dialog', 'dataForTheModal', 'otherDataForTheModal', 
      function testModalCtrl($scope, dialog, dataForTheModal, otherDataForTheModal) { 
    $scope.someData = dataForTheModal; 
    $scope.someOtherData = otherDataForTheModal; 

    $scope.someActionOnTheModal = function() { 
     //do whatever work here, then close the modal 
     $scope.dataResultFromTheModal = 'something that was updated' 
     dialog.close(dataResultFromTheModal); // close this modal 
    }; 
}]); 

вызова модальной как и от оригинального контроллера:

$scope.openModal = function() { 
     var d = $dialog.dialog({ 
      templateUrl: 'modalTemplate.html', 
      controller: 'testModalCtrl', 
      resolve: { 
       dataForTheModal: function() { 
        return 'this is my data'; 
       }, 
       otherDataForTheModal: function() { 
        return 'this is my other data'; 
       } 
       //pass as many parameters as you need to the modal      
      } 
     }); 
     d.open() 
      .then(function (dataResultFromTheModal) { 
       if (dataResultFromTheModal) { 
        $scope.something = dataResultFromTheModal  
        /*when the modal is closed, $scope.something will be updated with      
        the data that was updated in the modal (if you need this behavior) */ 
       } 
      }); 
    }; 

Для этой работы необходимо также для ввода $dialog в ваш основной контроллер. (Так же, как у меня на контроллере testModalCtrl выше)

Наконец, включите шаблон HTML в нижней части страницы:

<div ng-include src="'pathToYourTemplateFile/modalTemplate.html'"></div> 

Мне нравится делать модальности, как это, потому что хранение каждую модальности как отдельный шаблон файл держит вещи организованными и сохраняет вашу разметку страницы чистой. Кроме того, это упрощает повторное использование модалов во всем приложении.