jquery - 如何在 BootstrapDialog.show({ }) 弹出窗口中传递参数-6ren

jquery - 如何在 BootstrapDialog.show({ }) 弹出窗口中传递参数

转载作者：行者123 更新时间：2023-12-01 04:37:08

我正在使用 BootstrapDialog 来显示弹出窗口。我想传递一个参数。我正在使用数据属性。我的一段代码是:

BootstrapDialog.show({
     closable: false,
     title: "This is my popup",
     message: $('<div></div>').load(url),
     data: $('#divResourcePlanName').text($scope.ResourcePlanDetail.ResourcePlan.Name)
});

我仍然无法在 HTML 中获取 $scope.ResourcePlanDetail.ResourcePlan.Name 值。

最佳答案

您需要一个 directive使其正常工作。 data 需要一个对象。您不需要此处的data 来使其正常工作。你应该完全避免 DOM 绑定(bind)。仅在指令内使用 DOM 绑定(bind)。

What are Directives? At a high level, directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS's HTML compiler ($compile) to attach a specified behavior to that DOM element (e.g. via event listeners), or even to transform the DOM element and its children.

查看

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.35.4/css/bootstrap-dialog.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.35.4/js/bootstrap-dialog.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-app="myApp">
    <div ng-controller="MyCtrl">
      <button my-dialog message="someMessage">
        Open dialog
      </button>
    </div>
  </body>
</html>

对话框模板

<h1>{{ message }}</h1>

AngularJS 应用程序

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function ($scope) {
  $scope.someMessage = 'Hello World';
});

myApp.directive('myDialog', function ($templateRequest, $compile) {
    return {
    restrict: 'A',
    scope: {
      message: '='
    },
    link: function (scope, element, attrs) {
      element.on('click', function () {
        $templateRequest("dialog.html").then(function(html){
            BootstrapDialog.show({
              title: 'Say-hello dialog',
              message: $compile(html)(scope),
          });
        });
      })
    }
  }
});