Question

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

每封帖子都有自己的div，其ID是帖子的_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>

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

var o = {posts: []};

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

为了让我能够将CSS动画类添加到新帖子中，我需要知道它的_id，因为它也是div的id。我知道我可以通过使用以下内容将现在注释的_id从工厂返回到我的控制器来获取新帖response.data：

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

但我似乎无法从div内访问then()。我假设此时尚未存在正确的div ......？

我也不知道如何从successResponse._id之外访问then()。

我该怎么办？对于这种事情，这甚至是一个很好的方法吗？

Answer 1

似乎您在<div>呈现之前添加了该类。我有一个例子，我添加$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。

希望它有所帮助。

MEAN堆栈：如何在控制器中获取已发布项目的_id？

1 个答案: