Is it possible to dynamically change the content of a dialog by updating the URL? I have multiple HTML pages that I want to display in my dialog by simply changing the URL.
<md-button ng-click="showDialog($event,'myurl/page-1.html')">Show dialog-1</md-button>
<md-button ng-click="showDialog($event,'myurl/page-2.html')">Show dialog-2</md-button>
<md-button ng-click="showDialog($event,'myurl/page-3.html')">Show dialog-3</md-button>
My attempted solution:
JavaScript/AngularJS:
(function () {
angular.module('myApp', ['ngMaterial']).controller('AppCtrl', AppCtrl);
function AppCtrl($mdDialog, $scope) {
$scope.data = {url: 'Hello World'}; // "myurl/page.html" <--- I want to add external page here
$scope.hideDialog = $mdDialog.hide;
$scope.showDialog = showDialog;
function showDialog(evt) {
$scope.data.dialogOpen = true;
$mdDialog.show({
targetEvent: evt,
scope: $scope.$new(),
template:
'<md-dialog>' +
'<md-toolbar>' +
' <div class="md-toolbar-tools"><h2>Mango (Fruit)</h2></div>' +
'</md-toolbar>' +
' <md-content>{{data.url}}</md-content>' +
' <div class="md-actions">' +
' <md-button ng-click="data.dialogOpen=false;hideDialog()">' +
' Close' +
' </md-button>' +
' </div>' +
'</md-dialog>'
});
}
}
}());
I attempted to assign the path of my page to $scope.data, but I am aware that this approach will not work. Any suggestions on how I can add the path to external content in an AngularJS dialog?