I'm using BootstrapDialog to show a popup. I want to pass a parameter. I'm using data attribute. My piece of code is:
BootstrapDialog.show({ closable: false, title: "This is my popup", message: $('<div></div>').load(url), data: $('#divResourcePlanName').text($scope.ResourcePlanDetail.ResourcePlan.Name) }); Still I'm not able to get the $scope.ResourcePlanDetail.ResourcePlan.Name value in my HTML.
You need a directive to make it work fine. data expects an object. You don't need data here to make it work right. You should avoid DOM-Bindings at all. Only use DOM bindings inside your directive.
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> 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), }); }); }) } } });