将数据传递给mdDialog

Tec*_*e99 57 javascript modal-dialog angularjs material-design angular-material


主列表页面有编辑按钮.这将打开已编辑行的详细信息.
方式1:现在,如果我设置"ctrl.parent.q_details.client_location"它将与父列表控制器绑定,它作为双向绑定工作并自动更改值,如编辑框中的更改,这不是必需的.
这里我只想显示并允许在inputbox中编辑值.不希望在父控制器中更改.

►以下是父控制器中调用mdDialog的代码

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

►以下是弹出式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>
Run Code Online (Sandbox Code Playgroud)



Way2:第二种方法是直接从DB发送值而不绑定到Dialog控制器的ng-model(deliverController).

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

这给出了undefine $ scope.qe的错误.

所以最终,我无法将数据发送到mdDialogue并显示它们并允许以正常方式编辑它们.请有经验的有角度的人帮助我.我是棱角分明的新人.我从2天开始尝试不同的方式.

pas*_*oop 94

这家伙总是有正确的答案: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  
}
Run Code Online (Sandbox Code Playgroud)

使用传递对象中的locals属性传递变量.这些值将注入控制器而不是$ scope.传递父级的整个$范围可能不是一个好主意,因为它击败了孤立的范围范例.


BER*_*ine 5

HTML

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

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);
}
Run Code Online (Sandbox Code Playgroud)