$ scope被解雇后,$ scope从ng-model释放更新的值

时间:2018-12-29 15:48:10

标签: angularjs angular-ngmodel ng-controller

我试图显示一个$ 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>

0 个答案:

没有答案