平均堆栈：如何获取控制器内已发布项目的_id？

Question

我正在使用 MEAN 堆栈构建一个应用程序，用户可以在其中创建新的 posts（我的第一个 MEAN 应用程序尝试）。每当用户创建一个新的 post 并且它出现在页面上时，我希望它播放一个简短的 CSS 动画来向用户指示它的位置。我一直在考虑添加一个小的 CSS 动画 class 到 div 新 post 出现的地方，但这是我运行进入的地方问题。

每个 post 都有自己的 div，其 ID 是 post 的 _id。

<div ng-repeat="post in posts | orderBy: order">

    <div id="{{post._id}}">  // this is where I'd like to add the animation class 
       {{post.text}}    
    </div> 

</div>

我有一个工厂，其中新 post 的创建方法如下所示：

var o = {posts: []};

o.create = function(post) {
  return $http.post('/posts', post, {
  }).then(function(response){
    o.posts.push(response.data);
    // return response.data;
  });
};

为了能够将 CSS 动画 class 添加到新的 post 我需要知道它的 _id，因为它也是它的 div的id。我知道我可以通过使用以下方法将现在评论的 response.data 从工厂返回到我的控制器来获得新的 post 的 _id：

posts.create(newPost).then(function(successResponse) { // posts.create is the factory method above    
  console.log(successResponse._id);   // This works fine

  var id = '#' + successResponse._id; 
  $(id).addClass('flashNew');         // This does not work
});

但我似乎无法从 then() 内部访问 div。我假设此时正确的 div 还不存在...?

我也不知道如何从 then().

外部访问 successResponse._id

我该怎么办？这甚至是处理这类事情的好方法吗？

Answer 1

您似乎在呈现 <div> 之前添加了 class。我有一个例子，我添加了一个 $timeout 并且它工作正常。请看下面的示例代码：

var app = angular.module('ngApp', []);

app.controller('myCtrl', ['$scope', '$timeout', function($scope, $timeout) {
  'use strict';

  $scope.posts = [{
    text: 'blah',
    _id: 1
  }, {
    text: 'balls',
    _id: 2
  }];
  var i = 3
  $scope.addPost = function() {
    i = i + 1
    var post = {
      text: 'post with id ' + i,
      _id: i
    };

    $scope.posts.push(post);
    $timeout(function() {
      var id = '#' + post._id;
      var myElement = $(id);

      $(myElement).addClass('flashPost');

    }, 1);

  }
}]);

.flashPost {
  color: red;
  font-size: 2em;
  font-weight: 600;
}

<!DOCTYPE html>
<html ng-app="ngApp">

<head lang="en">
  <meta charset="utf-8">

  <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.0/css/bootstrap-combined.min.css" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
</head>

<body>

  <div ng-controller='myCtrl'>
    <button type='button' ng-click='addPost()'>Add Post</button>
    <div ng-repeat="post in posts">

      <div id="{{post._id}}">{{post.text}} <br/> Div's id = {{post._id}}
      </div>

    </div>

  </div>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
  <script src="app.js"></script>
</body>

</html>

请记住，我正在模拟服务器调用以创建新的 post。

希望对您有所帮助。

平均堆栈：如何获取控制器内已发布项目的_id？

MEAN stack: How to get the _id of a posted item inside a controller?

angularjs

mean-stack