Question

我的项目基于角度和简化，点击按钮时会显示一个模态弹出窗口。现在我需要将数据从javascript传递给模态体。

我知道使用按钮进行内联编码传递数据，但不是场景。我需要它从js文件传递的内容。

内容不是ajax调用。只需将文本从controllerjs传递给modal。

    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。＆＃39;解析＆＃39;部分是你所需要的 - 它可以通过一些数据传递到模态。

以下是一个例子：

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

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代码为例。首先，您需要使用角度方式将数据传递给模态，然后您可以从任何地方获取数据。在这种情况下，您的控制器功能将如下所示。

$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模式

2 个答案: