Передача данных в mdDialog


На главной странице списка есть кнопка редактирования. Это открывает детали отредактированной строки.
Путь-1: Теперь, если я установил "ctrl.parent.q_details.client_location", он связывается с родительским листинговым контроллером и работает как двусторонняя привязка и автоматически изменяет значения, как в поле редактирования изменения, которые здесь не являются обязательными.
Здесь просто я хочу отображать и разрешать значения редактирования в поле ввода. Не хотите меняться в родительском контроллере.

► Ниже приведен код в родительском контроллере для вызова mdDialog

$mdDialog.show({
                locals:{parent: $scope},                
                clickOutsideToClose: true,                
                controllerAs: 'ctrl',                
                templateUrl: 'quotation/edit/',//+edit_id,
                controller: function () { this.parent = $scope; },
            });

► Ниже приведен код всплывающего окна mdDialog.

<md-dialog aria-label="">
    <div ng-app="inputBasicDemo" ng-controller="deliverController" layout="column">
        <form name="" class="internal_note_cont">           
            <md-content class="md-padding">             
                <md-input-container class="md-input-has-value" flex>
                    <label>Client Name</label>
                    <input ng-model="qe.client_name" required >
                </md-input-container>
                <md-input-container flex>
                    <label>Client Location</label>
                    <input required ng-model="ctrl.parent.q_details.client_location">
                </md-input-container>                   
            </md-content>
        </form>
        <div>           
        </div>
    </div>
    <input type="" required ng-model="ctrl.parent.q_details.recid">  
</md-dialog>



Way2: второй способ отправляет значение непосредственно из БД без привязки к ng-модели контроллера Dialog (deliverController). 

]).controller("deliverController", ["$scope", "$filter","$http","$route","$window","$mdDialog",
    function ($scope, $filter,$http,$route,$window,$mdDialog) {
        $scope.qe.client_name = '12345'; // just to test.        
    }

Это дает ошибку undefine $scope.qe.

Так что, в конечном счете, я не могу отправлять данные в mdDialogue и отображать их и разрешать их редактировать как обычный. Пожалуйста, любой опытный парень angular мне поможет. Я новичок в angular. Я делаю разные способы с 2 дней.

Ответы

Ответ 1

У этого парня всегда есть правильный ответ: https://github.com/angular/material/issues/455#issuecomment-59889129

Короче:

$mdDialog.show({
            locals:{dataToPass: $scope.parentScopeData},                
            clickOutsideToClose: true,                
            controllerAs: 'ctrl',                
            templateUrl: 'quotation/edit/',//+edit_id,
            controller: mdDialogCtrl,
        });

var mdDialogCtrl = function ($scope, dataToPass) { 
    $scope.mdDialogData = dataToPass  
}

передать переменную, используя атрибут locals в проходящем объекте. эти значения будут введены в контроллер , а не в $scope. также передавая всю область $parent родителя, возможно, не такая хорошая идея, как она побеждает изолированную парадигму области.

Ответ 2

HTML

<md-button ng-click='vmInter.showDialog($event,_dataToPass)'>
<i class="fa fa-custom-edit" aria-hidden="true"></i>
</md-button>

Js

    function _showSiebelDialog(event,_dataToPass) {

        $mdDialog.show({
                locals:{dataToPass: _dataToPass}, //here where we pass our data
                controller: _DialogController,
                controllerAs: 'vd',
                templateUrl: 'contentComponents/prepare/views/Dialog.tmpl.html',
                parent: angular.element(document.body),
                targetEvent: event,
                clickOutsideToClose: true

            })
            .then(
                function(answer) {},
                function() {

                }
            );
    };

function _DialogController($scope, $mdDialog,dataToPass) {
console.log('>>>>>>> '+dataToPass);
}

Ответ 3

$scope.showPrompt = function(yourObject) {
$mdDialog.show({
    templateUrl: 'app/views/your-dialog.tpl.html',
    locals: {
        callback: $scope.yourFunction // create the function  $scope.yourFunction = function (yourVariable) {
    },
    controller:  function ($scope, $mdDialog, callback) {
        $scope.dialog.title = 'Your title';
        $scope.dialog.abort = function () {
            $mdDialog.hide();
        };
        $scope.dialog.hide = function () {

            if ($scope.Dialog.$valid){
                $mdDialog.hide();
                callback($scope.yourReturnValue, likes the return of input field);
            }
        };
    },
    controllerAs: 'dialog',
    bindToController: true,
    clickOutsideToClose: true,
    escapeToClose: true
});

};

Ответ 4

ES6 TL; путь DR

Создайте контроллер с переменными области видимости на лету

let showDialog = (spaceApe) => {
    $mdDialog.show({
        templateUrl: 'dialog.template.html',
        controller: $scope => $scope.spaceApe = spaceApe
    })
}

Шаблон

Voilà, spaceApe теперь можно использовать в шаблоне диалога

<md-dialog>
    <md-dialog-content>
        <span> {{spaceApe | json}} </span>
    <md-dialog-content>
<md-dialog>