CODEWITHSUNDEEP
angularjsangular-material
user3463332
user3463332

Reputation: 21

mdDialog does not close and does not update posts Angular Material

I have moved a form into an mdDialog pop up to get user input to add a post to the page.

I followed an example on Angular Material. So far it will not close the dialog after the form has been filled out and in turn does not update my list of posts on the page:

My Controller looks like this:

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();
        });
    };
};

The html to call this in my view is as follows:

<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>

I have been playing around with this for the past few hours and can't work it out, any insight would be greatly appreciated.

Upvotes: 2

Views: 1648

Answers (1)

nextt1
nextt1

Reputation: 3988

You are doing it wrong my friend. $mdDialog returns promise when you call .hide() method in DialogController. So pass the object as a argument and catch it is .then as it retures promise and use that object to push to your $scope.posts object.

See the below example for wokring demo. http://codepen.io/next1/pen/ONWzrE

Upvotes: 3

Related Questions