AngularJS - Controller Function Not Working w/ng-click

Question

I have a page that shows blog posts. I am trying to pass a delete function through ng-click. However, when I click on the hyperlink (ng-click), it does not call that function from the controller. Controller is properly loaded and I used a console.log to ensure that the page is successfully loading the controller in question. Any ideas? Thank you all!

HTML w/ng-click (about.html):

<table class="table table-bordered table-striped" ng-show="post.posts">
    <thead>
        <tr>
            <th>_id</th>
            <th>Title</th>
            <th>Body</th>
            <th>Created</th>
            <th>Updated</th>
            <th class="col-sm-2"></th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="post in post.posts | orderBy: 'createdAt'">
            <td>{{ post._id }}</td>
            <td>{{ post.title }}</td>
            <td>{{ post.body }}</td>
            <td>{{ post.createdAt | date : "MMMM d, y h:mm a" }}</td>
            <td>{{ post.updatedAt | date : "MMMM d, y h:mm a" }}</td>
            <td class="col-sm-2">
                <a ng-href="/about/{{ post._id }}" class="btn btn-danger">Edit</a>
                <!-- ============================
                DELETE BUTTON THAT IS NOT WORKING 
                --> =============================
                <a ng-href="#" ng-click="post.deletePost(post._id)" class="btn btn-primary">Delete</a>
            </td>
        </tr>
    </tbody>
</table>

Controller:

angular.module('postCtrl', [])

.controller('postController', function(Post) {

    var vm = this;

    // grab all posts at page load
    Post.all()
        .success(function(data) {

            // bind the posts that come back to vm.posts
            vm.posts = data;
        });

    // =============================
    // FUNCTION I ATTEMPTING TO CALL 
   // ==============================
    vm.deletePost = function(id) {

        Post.delete(id)
            .success(function(data) {

                // get all posts to update the table
                Post.all()
                    .success(function(data) {
                        vm.posts = data;
                    });
            });
    };

});

API Endpoint (tested with postman, properly working):

// DELETE request to delete a post by ID
apiRouter.route('/posts/:post_id')

    // delete the user with this id
    .delete(function(req, res) {
        Post.remove({
            _id: req.params.post_id
        }, function(err, post) {
            if (err) res.json({ message: "Error: " + err});
            res.json({ message: 'Successfully deleted' });
        });
    });

Angular Route:

.when('/about', {
    templateUrl: 'app/views/pages/posts/about.html',
    controller: 'postController',
    controllerAs: 'post'
});

Can you share executable demo/snippet or JSFiddle ? Create a Minimal, Complete, and Verifiable example — Rayon
– Rayon, Commented Jul 31, 2016 at 15:31

Jorawar Singh · Accepted Answer · 2016-07-31 16:09:04Z

1

Your post from ng-repeat is same as your controller post as postController try to change the controller name and see if works

answered Jul 31, 2016 at 16:09

Jorawar Singh

7,6414 gold badges29 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

joshdsantos · Accepted Answer · 2016-07-31 15:52:52Z

1

The ng-repeat is creating a new scope called 'post' so post.deletePost is trying to use that scope - but deletePost is a function defined in the controller (in this case, the parent scope).

Try using $parent.deletePost(post._id) or something more elegant like this tip from John Papa.

answered Jul 31, 2016 at 15:52

joshdsantos

273 bronze badges

Comments

Sajeetharan · Accepted Answer · 2016-07-31 16:13:35Z

Try replace the controller as vm instead of post , it will work

<div ng-app="postCtrl">
  <div ng-controller="postController as vm">
    <table class="table table-bordered table-striped">
      <thead>
        <tr>
          <th>_id</th>
          <th>Title</th>
          <th>Body</th>
          <th class="col-sm-2"></th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="post in vm.posts">
          <td>{{ post.id }}</td>
          <td>{{ post.title }}</td>
          <td>{{ post.body }}</td>

          <td class="col-sm-2">
            <a ng-href="/about/{{ post._id }}" class="btn btn-danger">Edit</a>
            <!-- ============================
                DELETE BUTTON THAT IS NOT WORKING 
                -->=============================
            <a ng-href="#" ng-click="vm.deletePost(post._id)" class="btn btn-primary">Delete</a>

          </td>
        </tr>
      </tbody>
    </table> Me!
  </div>
</div>

Here is the working App

Collectives™ on Stack Overflow

AngularJS - Controller Function Not Working w/ng-click

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related