I am new to ngDialog and i am trying to display response data, received from my service, into ngDialog, my popup is coming and i am able to display static data but when i pass data:$scope.myData, the dynamic value just doesn't populate, Please guide where i am going wrong... Below is the code.
popup.html:
<div>hi how r u</div>
<div>I am fine thank u</div>
Controller code:
paymentSearchApp.controller('paymentSearchCtrl', function (getXmlService,paymentSearchService,paymentSearchResponse,paymentDetailService,auditHistoryService,errorLogService,accountingEntryService, notesService,$scope, $q, ngDialog) {
getXmlService.getXmlDatafunction().then(
function(response){
$scope.xmldata = response;
console.log($scope.xmldata);
ngDialog.open({
template: 'showXml.html',
className: 'ngdialog-theme-default',
data: $scope.xmldata
});
}, function(error){}
)
});
You are pretty close!
You can indeed use the data
key for the object passed to ngDialog.open
in order to inject data in your dialogs' scope.
However, the data object isn't directly overriding the scope's potentially already existing properties: it is available in $scope.ngDialogData
.
For example, considering the following code:
ngDialog.open({
template: 'dialogTemplate',
data: {
ip: res.data.origin
}
});
You'll find the ip
information, within your dialog template, by referring to: {{ngDialogData.ip}}
.
For illustration, check the snippet below:
var myApp = angular.module('myApp', ['ngDialog']);
myApp.factory('PaymentSearchSvc', ['$http', function($http) {
return {
getXmlDataFunction: $http.get.bind($http, 'https://httpbin.org/ip')
};
}]);
myApp.controller('PaymentSearchCtrl', ['$scope', 'ngDialog', 'PaymentSearchSvc', function($scope, ngDialog, paymentSearchSvc) {
$scope.process = function() {
paymentSearchSvc.getXmlDataFunction().then(function(response) {
ngDialog.open({
template: 'dialogTemplate',
data: {
ip: response.data.origin
}
});
});
};
}]);
.text-primary {
color: steelblue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.6.4/js/ngDialog.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.6.4/css/ngDialog-theme-default.min.css">
<div ng-app="myApp">
<div ng-controller="PaymentSearchCtrl">
<button ng-click="process()">What's my IP?</button>
</div>
<script type="text/ng-template" id="dialogTemplate">
<h1>Dialog content</h1>
<p>
Your IP address is: <span class="text-primary">{{::ngDialogData.ip}}</span>
</p>
</script>
</div>