mdDialog 不关闭也不更新帖子 Angular Material

Question

我已将表单移动到 mdDialog 弹出窗口中以获取用户输入以将 post 添加到页面。

我在 Angular Material 上做了一个例子。到目前为止，它不会在填写完表格后关闭对话框，也不会更新我在页面上的 posts 列表：

我的控制器看起来像这样：

myApp.controller('PostsController', ['$scope', 'PostsService', '$mdDialog',
    function ($scope, PostsService, $mdDialog) {
        $scope.posts = PostsService.getPosts()
        $scope.incrementUpvotes = function (post) {
            post.upvotes += 1;
        };
        $scope.showAdd = function (ev) {
            $mdDialog.show({
                controller: DialogController,
                scope: $scope,
                template: '<md-dialog aria-label="Mango (Fruit)"> <md-content class="md-padding"><h1>Add a Post</h1> <form name="postForm" novalidate ng-submit="addPost()"> <div layout layout-sm="column"> <md-input-container flex> <label>Title</label> <input type="text" name="title"class="form-control" ng-model="newPost.title" ng-required> </md-input-container> </div> <div layout layout-sm="column"> <md-input-container flex> <label>Date</label> <input type="date" name="date" class="form-control" ng-model="newPost.date"> </md-input-container> <md-input-container flex> </div> <div layout layout-sm="column"> <md-input-container flex> <label>Link</label> <input type="url" class="form-control" ng-model="newPost.link"> </div> <div layout layout-sm="column"> <md-input-container flex> <label>Username</label> <input type="text" name="username"class="form-control" ng-model="newPost.username" ng-required> </div> </md-input-container> </form> </md-content> <div class="md-actions" layout="row"> <span flex></span> <md-button type="submit" class="btn btn-primary" ng-click="addPost()" ng-disabled="postForm.$pristine || (postForm.$dirty && postForm.$invalid) "> Post </md-button></div> </md-dialog>'
                ,
                targetEvent: ev
            });
        };
    }]);

function DialogController($scope, $mdDialog) {
    $scope.addPost = function () {
        $mdDialog.addPost.then(function () {
            var new_id = 1 + $scope.posts[$scope.posts.length - 1].id
            $scope.posts.push({
                title: $scope.newPost.title,
                id: new_id,
                link: $scope.newPost.link,
                username: $scope.newPost.username,
                comments: [],
                upvotes: 0
            });
            $scope.newPost = {};
            $mdDialog.hide();
        });
    };
};

在我看来html调用这个方法如下：

<md-button class="md-fab md-fab-bottom-right" aria-label="Add" ng-click="showAdd($event)">
            <ng-md-icon icon="add"></ng-md-icon>
        </md-button>

过去几个小时我一直在研究这个问题，但无法解决，任何见解将不胜感激。

Answer 1

你做错了我的朋友。 $mdDialog returns 在 DialogController 中调用 .hide() 方法时承诺。因此，将对象作为参数传递并捕获它是 .then 因为它返回承诺并使用该对象推送到您的 $scope.posts 对象。

请参阅下面的工作环演示示例。 http://codepen.io/next1/pen/ONWzrE

mdDialog 不关闭也不更新帖子 Angular Material

mdDialog does not close and does not update posts Angular Material

angularjs

angular-material