передать данные в мод начальной загрузки из JavaScript

0

Мой проект основан на угловом и упрощенном виде, при нажатии кнопки появляется модальное всплывающее окно. Теперь мне нужно передать данные в модальное тело из javascript.

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

Содержимое не является вызовом ajax. Просто передайте текст с контроллераjs на modal.

Вот JSFIDDLE

    var myApp = angular.module("popupApp",[]);
myApp.controller("myController",function($scope){
    $scope.popup = function(){
        angular.element("#myModal").modal({
                                show:true,
                                contentForModalBody:"I am from the controller"    
                                    });
    }

    angular.element('#myModal').on('show.bs.modal', function (event) {
        console.log(event);
        console.log("I am initiated");
        //How do i get contentForModalBody here?
    });
});
  • 0
    Где ваш контент?
  • 0
    Пожалуйста, проверьте мой jsfiddle. Это дает лучшую идею. Содержимое, которое мне нужно заполнить в модальном теле: «Я из контроллера»
Теги:
bootstrap-modal

2 ответа

0
Лучший ответ

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

$scope.popup = function(){
        angular.element(document.querySelector("#myModal .modal-body")).html("Content for the modal body");
        angular.element(document.querySelector("#myModal")).modal({
                    show:true,
         });
    }

Вы можете передать модальный контент из любой переменной javasript или контроллера. Вам просто нужно заменить содержимое переменной. подобно

$scope.modalContent = "Content for the modal body"; 
angular.element(document.querySelector("#myModal .modal-body")).html($scope.modalContent);
Поделиться
  • 0
    Почему мне нужен выбор document.query Мой angular.element делает работу?
  • 0
    Да, это будет. Счастливый угловой js :-)
0

Все, что вам нужно сделать, это использовать $ modal service на стороне контроллера и $ modalInstance на стороне модального контроллера. Часть "Разрешить" - это то, что вам нужно - это то, как вы можете передавать некоторые данные в модальные.

Вот пример:

var modalInstance = $modal.open({
  templateUrl: 'some/modal.html',
  controller: 'ModalInstanceCtrl',
  size: 'lg',
  resolve: {
    item: function () {
      return "Something you want to pass in";
    }
  }
});

// Here the part when you access data after closing the modal (clicking either Ok or Cancel).
modalInstance.result.then(function (item) {
  $scope.confirm(item);

}, function (item) {
  $scope.reject(item);
});

ModalInstanceController (вы поймаете данные здесь, введя "элемент" из части разрешения в контроллере):

controller('ModalInstanceCtrl', function ($scope, $modalInstance, item) {

  $scope.item = item;
  //example implementation of 'Ok' button.
  $scope.ok = function () {
$modalInstance.close($scope.item);
 };

  // example implementation of Cancel button.
  $scope.cancel = function () {
$modalInstance.dismiss('cancel');
  };
});

Конечно

 templateUrl: 'some/modal.html'

Его путь к вашему модальному html файлу.

Поделиться
  • 0
    Вы не поняли мой вопрос. Пожалуйста, пройдите это снова. Тот, кого вы упомянули, является угловым загрузочным интерфейсом. Что не является необходимым в моем случае. Я держал это простым. Просто передайте текст.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню