我试图显示一个$ mdDialog,它正在使用与调用它相同的控制器。我在$ scope中具有三个属性,其中$ mdDialog将显示其初始值。每个输入和选择都绑定到各自$ scope属性的ng-model。当输入值更改时,ng模型也会更改,这是预期的。但是,当我单击$ mdDialog的完成按钮时,尽管它是从输入字段更新的,但它显示了$ scope的旧值。这可能是什么问题?
该对话框会从$ scope中弹出正确的值,并且如果我通过{{newActionLabel}}在对话框中打印该对话框,则会打印更新的值。但是当调用addAction
时,它会以某种方式使其松散。
控制器代码:
app.controller("cardController", function ($scope, $firebaseObject,$routeParams,$mdDialog) {
$scope.isLoading = true;
$scope.selectedActionPlatforms = [];
$scope.platforms = ['ANDROID','IOS','ANY','ANDROID_THINGS'];
$scope.cardTypes = ['TYPE_1','TYPE_2'];
$scope.selectedPlatform = 'ANY';
$scope.selectedCardType = 'TYPE_1';
$scope.newActionLabel = 'OKAY';
$scope.newActionUrl = 'https://www.google.com';
$scope.newActionPlatformType = 'ANY';
$scope.newActionPrioriy = 0;
var ref = firebase.database().ref('cards/'+$routeParams.id);
$scope.expiryDateFormatted = new Date();
$scope.showAtDateFormatted = new Date();
$scope.card = $firebaseObject(ref);
$scope.card.$loaded()
.then(function () {
$scope.newActionPrioriy = $scope.card.actions.length+1;
$scope.expiryDateFormatted = new Date($scope.card.expiry);
$scope.showAtDateFormatted = new Date($scope.card.showAt);
$scope.selectedPlatform = $scope.card.platformType;
$scope.selectedCardType = $scope.card.cardType;
$scope.isLoading = false;
$scope.card.actions.forEach(function(action) {
$scope.selectedActionPlatforms.push(action.platformType);
});
})
$scope.removeImage = function(index){
$scope.card.images.splice(index,1);
};
$scope.removeAction = function (index) {
$scope.card.actions.splice(index, 1);
};
$scope.showAddActionDialog = function (ev) {
$mdDialog.show({
controller: 'cardController',
templateUrl: 'add_action_dialog.html',
parent: angular.element(document.body),
targetEvent: ev,
clickOutsideToClose: true,
fullscreen: $scope.customFullscreen // Only for -xs, -sm breakpoints.
})
.then(function () {
console.log($scope.newActionLabel,$scope.newActionUrl,$scope.newActionPlatformType,$scope.newActionPrioriy);
}, function () {
// cancelled
});
};
$scope.hide = function () {
$mdDialog.hide();
};
$scope.cancel = function () {
$mdDialog.cancel();
};
$scope.addAction = function () {
$mdDialog.hide();
};
});
md-dialog html代码:
<md-dialog aria-label="Add Action">
<form ng-cloak>
<md-toolbar>
<div class="md-toolbar-tools">
<h2>Add Action</h2>
<span flex></span>
<md-button class="md-icon-button" ng-click="cancel()">
<md-icon><i class="material-icons">
close
</i>
</md-icon>
</md-button>
</div>
</md-toolbar>
<md-dialog-content>
<div class="md-dialog-content" layout="column">
<md-input-container>
<input ng-model="newActionLabel" placeholder="Action Label">
</md-input-container>
<md-input-container>
<input ng-model="newActionUrl" placeholder="Action URL">
</md-input-container>
<md-input-container>
<label>Platform Type</label>
<md-select ng-model="newActionPlatformType">
<md-option ng-repeat="pf in platforms" ng-value="pf">
{{pf}}
</md-option>
</md-select>
</md-input-container>
</div>
</md-dialog-content>
<md-dialog-actions layout="row">
<md-button ng-click="addAction()">
ADD
</md-button>
</md-dialog-actions>
</form>
</md-dialog>