我正在创建一个小应用,我打开一个角度材质对话框来编辑客户地址信息。当前对话框打开并显示现有地址信息,当编辑和提交对话框中的数据时,数据库将更新。但是,页面上的地址信息不会自行更新。
更新数据库后,页面上的Add1和Add2应更新为新信息。我无法弄清楚如何做到这一点请帮助?
我不希望主页面在用户输入地址时更新,只有当exec功能完成时才会更新。
HTML:
<div ng-controller="AppCtrl" class="md-padding dialogdemoBasicUsage" id="popupContainer" ng-cloak="" ng-app="MyApp">
<div class="dialog-demo-content" layout="row" ayout="row" layout-wrap="" layout-margin="" layout-align="center">
<p>Add1: {{ customerdetails.Add1 }}</p>
<p>Add2: {{ customerdetails.Add2 }}</p>
<br/>
<md-button class="md-primary md-raised" ng-click="showTabDialog($event)">
Open Dialog
</md-button>
</div>
<script type="text/ng-template" id="tabDialog.tmpl.html"><md-dialog aria-label="Mango (Fruit)">
<form>
<md-toolbar>
<div class="md-toolbar-tools">
<span flex></span>
<md-button class="md-icon-button" ng-click="cancel()">
<md-icon md-svg-src="img/icons/ic_close_24px.svg" aria-label="Close dialog"></md-icon>
</md-button>
</div>
</md-toolbar>
<md-dialog-content style="max-width:800px;max-height:810px; ">
<md-tabs md-dynamic-height md-border-bottom>
<md-tab label="one">
<md-content class="md-padding">
<md-input-container class="md-block">
<label>Address 1</label>
<input ng-model="customerdetails.Add1">
</md-input-container>
<md-input-container class="md-block">
<label>Address 2</label>
<input ng-model="customerdetails.Add2">
</md-input-container>
</md-content>
</md-tab>
</md-tabs>
</md-dialog-content>
<md-dialog-actions layout="row">
<md-button ng-click="editAddressSubmit()" style="margin-right:20px;" >
Update
</md-button>
</md-dialog-actions>
</form>
</md-dialog>
</script>
</div>
JS
angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
.controller('AppCtrl', function($scope, $mdDialog, $mdMedia) {
$scope.customerdetails={
Add1: 'line 1',
Add2: 'line 2'
}
$scope.showTabDialog = function(ev) {
$mdDialog.show({
controller: 'AppCtrl',
templateUrl: 'tabDialog.tmpl.html',
parent: angular.element(document.body),
targetEvent: ev,
clickOutsideToClose:true
})
};
$scope.cancel = function() {
$mdDialog.cancel();
};
$scope.editAddressSubmit = function() {
console.log('edit address submit funtion clicked')
//in live code the database is updated here but the Add1 and Add2 is not updated on the main page once the dialog is closed!
return $scope.exec('call/UpdateCustomerSQL',
{
Add1: $scope.customerdetails.Add1,
Add2: $scope.customerdetails.Add2
}
).then(function() { // close popup
console.log('then function close popup')
$mdDialog.cancel();
})
}
}) //close controller
答案 0 :(得分:1)
诀窍是你必须传递一个孤立的scope
,这样你的对话框的范围就不会被绑定到你的父范围。为此,您必须使用参数local
,并使用不同的控制器来处理逻辑。
$mdDialog.show({
controller: 'DialogCtrl',
templateUrl: 'tabDialog.tmpl.html',
parent: angular.element(document.body),
targetEvent: ev,
clickOutsideToClose: true,
locals: {
address1: $scope.customerdetails.Add1,
address2: $scope.customerdetails.Add2,
}
})
然后,您将使用另一个控制器DialogCtrl
来处理对话框中所需的任何逻辑。在这里,你可以将address1
和address2
注入你的控制器,就像这一行一样。
.controller('DialogCtrl',function($scope,$mdDialog, address1, address2){
console.log(address1, address2) //this will have the values as $scope.customerdetails.Add1 and 2
}
现在,您已成功将数据从AppCtrl
传递到DialogCtrl
,然后您可以执行数据库转换。之后,您将必须解决承诺,以便您的AppCtrl可以获取更新的数据。
我分叉了你的笔:http://codepen.io/cozyazure/pen/PzYzQd
我没有你的服务,所以我嘲笑$timeout
来模仿承诺回报