Vraag Gegevens doorgeven aan mdDialog



Hoofdlijstpagina heeft bewerkknop. Welke details van de bewerkte rij opent.
Way-1: Nu, als ik "ctrl.parent.q_details.client_location" instel, is het bindend met bovenliggende lijstcontroller en werkt het als een binding in twee richtingen en worden automatisch de waarden gewijzigd zoals in de wijzigingen in het invoervak, wat hier niet verplicht is.
Hier wil ik alleen bewerkwaarden weergeven en toestaan ​​in de invoervak. Niet willen worden veranderd in de parent-controller.

► Hierna volgt de code in de bovenliggende controller om mdDialog te bellen

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

► Het volgende is de code van de popup 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: De tweede manier is om de waarde rechtstreeks vanuit DB te verzenden zonder binding aan het ng-model van de Dialog-controller (deliverController).

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

Dit geeft een fout van undefine $ scope.qe.

Dus uiteindelijk kan ik geen gegevens verzenden naar mdDialogue en deze weergeven en op de normale manier bewerken. Alstublieft, iemand die een hoekige kerel heeft ervaren, help me. Ik ben nieuw voor hoekig. Ik probeer verschillende manieren sinds 2 dagen.


45
2017-07-06 08:13


oorsprong


antwoorden:


Deze gast heeft altijd het juiste antwoord: https://github.com/angular/material/issues/455#issuecomment-59889129

In het kort:

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

Voer de variabele door met behulp van het locals-attribuut in het passerende object. Deze waarden worden in de controller geïnjecteerd niet de $ scope. Het doorgeven van de volledige $ scope van de parent is misschien niet zo'n goed idee omdat het het geïsoleerde scope-paradigma verslaat.


80
2017-07-07 21:07



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

5
2018-06-08 08:52



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

};


1
2018-03-03 11:58



De ES6 TL; DR-manier

Creëer direct een controller met bereikvariabelen

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

Sjabloon

Voila, spaceApe kan nu worden gebruikt in de dialoogsjabloon

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

1
2017-08-25 11:32



Dit werkte voor mij:

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

En in het zicht ...

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


0
2018-03-23 15:14