mdDialog에 데이터 전달

mdDialog에 데이터 전달

---

메인 목록 페이지에는 편집 버튼이 있습니다. 편집 된 행의 세부 정보가 열립니다.
Way-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 : 두 번째 방법은 Dialog 컨트롤러 (deliverController)의 ng-model에 바인딩하지 않고 DB에서 직접 값을 보내는 것입니다.

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

이것은 정의되지 않은 $ scope.qe 오류를 제공합니다.

따라서 궁극적으로 mdDialogue로 데이터를 보내고 표시 할 수 없으며 일반적인 방식으로 편집 할 수 없습니다. 앵글 러 경험이있는 사람이 도와주세요. 나는 각도가 처음입니다. 나는 2 일 이후로 다른 방법을 시도하고있다.

---

이 사람은 항상 정답을 가지고 있습니다 : 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를 전달하는 것은 격리 된 범위 패러다임을 무너 뜨리기 때문에 좋은 생각이 아닐 수도 있습니다.

---

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);
}

---

$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
});

};

---

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>

---

This worked for me:

        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!!!');
        });
    };

And in the view...

<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>

ReferenceURL : https://stackoverflow.com/questions/31240772/passing-data-to-mddialog