AngularJS - コントローラー機能が動作しない

Question

ブログの投稿を表示するページがあります。私はng-clickを通して削除機能を渡そうとしています。しかし、ハイパーリンク（ng-click）をクリックすると、その関数はコントローラから呼び出されません。コントローラが適切にロードされ、console.logを使用して、問題のコントローラをページが正常にロードしていることを確認します。何か案は？皆さん、ありがとうございました！

HTML/NGクリック（about.html）W：

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

Answer 1

ng-repeatからあなたの投稿がpost as postController は、コントローラ名を変更し、作品が

Answer 2

代わりにポストのVMとして、コントローラを交換してください、それはここで

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

に動作しますNG-repeatが「ポスト」そうpost.deletePostをしようとしていると呼ばれる新しいスコープを作成して作業App

Answer 3

ですそのスコープを使用しますが、deletePostはコントローラで定義された関数です（この場合は親スコープです）。

$parent.deletePost(post._id)などを使用してください。より具体的には、this tip from John Papaのようにしてください。