Вопрос:

Issue with passing object to mdDialog templateUrl

angularjs angular-material

393 просмотра

1 ответ

1544 Репутация автора

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>

Автор: Ahsan Источник Размещён: 22.08.2016 09:02

Ответы (1)


1 плюс

9209 Репутация автора

Решение

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
})
Автор: camden_kid Размещён: 22.08.2016 10:12
Вопросы из категории :
32x32