Question

我有一个显示博客帖子的页面。我试图通过ng-click传递删除功能。但是，当我单击超链接（ng-click）时，它不会从控制器调用该功能。控制器已正确加载，我使用console.log来确保页面成功加载有问题的控制器。有任何想法吗？谢谢大家！

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>

控制器：

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端点（使用邮递员测试，正常工作）：

// 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'
});

Answer 1

ng-repeat正在创建一个名为'post'的新作用域，因此{{1}}正在尝试使用该作用域 - 但deletePost是控制器中定义的函数（在本例中是父作用域）。

尝试使用{{1}}或更优雅的内容，例如this tip from John Papa。

Answer 2

ng-repeat的帖子与您的控制器post as postController相同尝试更改控制器名称，看看是否有效

Answer 3

尝试将控制器替换为vm而不是post，它将起作用

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

这是工作App

AngularJS - 控制器功能不工作w / ng-click

3 个答案: