передать данные в bootstrap modal из javascript

Question

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

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

Содержимое не является аякс-кодом. Просто передайте текст с контроллера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? 
    }); 
}); 

Answer 1

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

$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); 

Answer 2

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

Heres пример:

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 (вы ловите данные здесь, вводя 'элемент' из Resolve части в контроллере):

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-файлу.