2

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

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

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

4

1 回答 1

1

您需要一个指令才能使其正常工作。data期望一个对象。你不需要data在这里让它正常工作。您应该完全避免使用 DOM 绑定。仅在指令中使用 DOM 绑定。

什么是指令？ 在高层次上，指令是 DOM 元素（例如属性、元素名称、注释或 CSS 类）上的标记，它告诉 AngularJS 的 HTML 编译器（$compile）将指定的行为附加到该 DOM 元素（例如通过事件侦听器） ，甚至转换 DOM 元素及其子元素。

看法

<!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),
          });
        });
      })
    }
  }
});

>演示 plnkr

于 2018-03-20T16:35:03.143 回答