Ahsan Ahsan - 3 months ago 69
AngularJS Question

Issue with passing object to mdDialog templateUrl

I am trying to show a mdDialog with some information about some order. This code works fine when I do it as part of the main html page. Trying to show same information in the dialog, it doesnt show up anything other than the table headers.

Any idea whats going on ?

function showDetails(event, order) {
console.log(order);
//show details
$mdDialog.show({
controller: DialogController,
templateUrl: 'app/orders/directives/orderDetails.html',
parent: angular.element(document.body),
targetEvent: event,
clickOutsideToClose: true,
escapeToClose: true,
locals:{
itemsParent: order,
three: 3
},
fullscreen: $scope.customFullscreen // Only for -xs, -sm breakpoints.
})
.then(function(answer) {
}, function() {});
};

function DialogController($scope, $mdDialog, itemsParent) {
console.log(itemsParent);
$scope.hide = function() {
$mdDialog.hide();
};
$scope.cancel = function() {
$mdDialog.cancel();
};
$scope.answer = function(answer) {
$mdDialog.hide(answer);
};
}


the templateurl:

<form>
<md-toolbar>
<div class="md-toolbar-tools">
<h2> Order Id:{{ itemsParent.orderid }}</h2>
<span flex></span>
<md-button class="md-icon-button" ng-click="cancel()">
<i class="material-icons">clear</i>
</md-button>
</div>
</md-toolbar>
<md-dialog-content>
<div class="md-dialog-content">
<p>
Ahsan:
{{three}}
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Product Id</th>
<th>Name</th>
</tr>
</thead>
<tr ng-repeat="product in itemsParent.products">
<td>
<div>{{ product.productid }}</div>
</td>
<td>
<div>{{ product.name }}</div>
</td>
</tr>
</table>
</p>
</div>
</md-dialog-content>
<md-dialog-actions>
<md-dialog-actions layout="row">
<span flex></span>
<md-button class="md-primary md-raised" ng-click="answer(close)">
Close
</md-button>
</md-dialog-actions>
</md-dialog-actions>



Answer

In DialogController do this:

$scope.itemsParent = itemsParent;

If that on its own does not work, then also change the dialog setup as follows:

$mdDialog.show({
    controller: DialogController,
    templateUrl: 'app/orders/directives/orderDetails.html',
    parent: angular.element(document.body),
    targetEvent: event,
    clickOutsideToClose: true,
    escapeToClose: true,
    locals:{
        itemsParent: order,
        three: 3
    },
    fullscreen: $scope.customFullscreen // Only for -xs, -sm breakpoints.
    scope: $scope,
    preserveScope: true
})