将数据从 javascript 传递到 bootstrap 模态

Question

我的项目基于 angular 并且作为简化，单击按钮时将显示模式弹出窗口。现在我需要将数据从 javascript.

传递到模态主体

我知道使用带有按钮的内联编码传递数据，但不是这种情况。我需要它从js文件传递的内容。

内容不是 ajax 调用。只需将文本从 controllerjs 传递到模态即可。

    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

您需要做的就是在控制器端使用 $modal 服务，在模态控制器端使用 $modalInstance。 'Resolve' 部分正是您所需要的 - 它是您将一些数据传递给模态的方式。

举个例子：

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（您通过从控制器中的解析部分注入 'item' 来捕获数据）：

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 文件的路径。

Answer 2

有一种内联传递内容的方法，但在您的情况下，您不想内联传递数据。所以以this代码为例。首先，您需要使用 angular 方式将数据传递给模态，然后您可以从任何地方获取数据。在这种情况下，您的控制器的功能将如下所示。

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

将数据从 javascript 传递到 bootstrap 模态

pass data to bootstrap modal from javascript

jquery

angularjs

bootstrap-modal