Как передать параметр во всплывающем окне BootstrapDialog.show({ })

Я использую 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.

Источник

1 ответ

Вам нужна директива, чтобы она работала нормально. data ожидает объект. Вам не нужно data здесь, чтобы заставить его работать правильно. Вы должны избегать DOM-Bindings вообще. Используйте только привязки DOM внутри вашей директивы.

Каковы Директивы? На высоком уровне директивы являются маркерами элемента DOM (например, атрибута, имени элемента, комментария или класса CSS), которые сообщают HTML-компилятору AngularJS ($ 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),
          });
        });
      })
    }
  }
});

> демо плнкр

Источник
Другие вопросы по тегам