AngularJS - 控制器功能无法使用w/ng点击

我有一个显示博客文章的页面。我正在尝试通过ng-click传递一个删除函数。但是，当我点击超链接（ng-click）时，它不会从控制器调用该函数。控制器已正确加载，并使用console.log确保页面正在成功加载相关控制器。有任何想法吗？谢谢你们！AngularJS - 控制器功能无法使用w/ng点击

HTML瓦特/ NG-点击（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' }); 
     }); 
    });

角度路线：

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

来源

2016-07-31 David Anthony Acosta

你能分享可执行演示/片断或[的jsfiddle（https://jsfiddle.net/）？ [_创建一个最小，完整和可验证的示例_]（http://stackoverflow.com/help/mcve） – Rayon

您是否使用controller作为控制器的语法？ –

从ng-repeat您的文章是一样的控制器post as postController 尝试改变控制器名称，看看作品

来源

2016-07-31 16:09:04

尝试更换控制器的虚拟机，而不是后，它会工作

<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

来源

2016-07-31 15:31:55 Sajeetharan

OP正在使用'Controller As'语法.. – Rayon

不幸:(但是谢谢 –

@DavidAnthonyAcosta检查更新后的答案 – Sajeetharan

的NG-重复是创建一个名为“后”，因此post.deletePost试图新天地使用该范围 - 但deletePost是在控制器中定义的函数（在本例中为父范围）。

尝试使用$parent.deletePost(post._id)或更优雅的东西，如this tip from John Papa。

来源

2016-07-31 15:52:52 joshdsantos

非常好，那完全正确。谢谢！ –

AngularJS - 控制器功能无法使用w/ng点击

回答

相关问题