Передача данных в 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>



Способ 2: второй способ — отправить значение напрямую из БД без привязки к ng-модели контроллера диалога (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, отображать их и разрешать редактировать их обычным способом. Пожалуйста, помогите мне любому опытному угловатому парню. Я новичок в угловом. Уже 2 дня пробую разные способы.


javascript material-design angularjs angular-material modal-dialog
person TechCare99    schedule 06.07.2015    source источник
comment
Вы можете использовать ng-bind для настройки одноразовой привязки. Вы также можете использовать службу для передачи данных между родителем и дочерним элементом.   -  person BobDoleForPresident    schedule 06.07.2015
comment
Вы пробовали с preserveScope: true ?   -  person Ellone    schedule 17.08.2015

Ответы (4)


arrow_upward
98
arrow_downward

У этого парня всегда есть правильный ответ: 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. Кроме того, передача всей $scope родителя может быть не такой уж хорошей идеей, поскольку она побеждает парадигму изолированной области.

person pascalwhoop    schedule 07.07.2015
comment
Если mdDialogData изменен в mdDialogCtrl, будет ли это изменение отражено в $scope.parentScopeData? У меня есть вариант использования, который должен передать объект текущей области в mdDialogCtrl, и изменения этого объекта в mdDialogCtrl должны быть перехвачены за пределами области. Спасибо! - person horatio.mars; 02.04.2016
comment
Да, это отражает, если вы передаете ссылку на объект через локальные, это действительно отражается, хотя я ожидаю, что он будет изолировать, а не изменять данные родительской области напрямую, странно ..! - person Basav; 20.05.2016
comment
Любая идея, как это сделать без использования $scope? - person Bo Li; 02.11.2016
comment
Должна ли быть запятая в конце литерала объекта, переданного в .show? В частности, строка с надписью mdDialogCtrl, похоже, ее там быть не должно. - person OmNiOwNeR; 31.08.2018

arrow_upward
5
arrow_downward

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);
}
person BERGUIGA Mohamed Amine    schedule 08.06.2016
comment
как я могу снова передать значение вызывающей функции в параметре «ответ» - person Pawan Kotak; 12.09.2018

arrow_upward
1
arrow_downward

Способ ES6 TL;DR

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

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

Шаблон

Вуаля, spaceApe теперь можно использовать в шаблоне диалога.

<md-dialog>
    <md-dialog-content>
        <span> {{spaceApe | json}} </span>
    <md-dialog-content>
<md-dialog>
person DotBot    schedule 25.08.2017

arrow_upward
0
arrow_downward

Это сработало для меня:

        confirmNewData = function() {
        let self = this;
        this.$mdDialog.show({                
            templateUrl: '/dist/views/app/dialogConfirmAFEData.html',
            controllerAs: "ctrl",                                
            controller: $scope => $scope = { $mdDialog: self.$mdDialog, 
                                             data: self.FMEData, 
                                             cancel: function() { this.$mdDialog.cancel(); }, 
                                             confirm: function() { this.$mdDialog.hide(); }  
                                           },
            clickOutsideToClose: false
        }).then(function() {
            // User Accepted!!
            console.log('You accepted!!!');
        }, function() {
            // User cancelled, don't do anything.
            console.log('You cancelled!!!');
        });
    };

А в представлении...

<md-dialog aria-label="Start New AFE" style="min-width: 50%;">
    <md-toolbar>
      <div class="md-toolbar-tools">
        <h2>GIS Data...</h2>          
      </div>
    </md-toolbar>
    <md-dialog-content>
        <div layout="column" layout-padding>
            <li/>Lease: {{ ctrl.data.LEASE }}    
            <li/>Reservoir: {{ ctrl.data.RESERVOIR }}    
        </div>
    </md-dialog-content>

    <md-dialog-actions layout="row">
      <md-button class="md-button" ng-click="ctrl.cancel()">Cancel</md-button>
      <md-button class="md-button" ng-click="ctrl.confirm()">Yes</md-button>                
    </md-dialog-actions>

person Danmar Herholdt    schedule 23.03.2018