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