Question

我知道在Angular世界中绑定数据比操纵dom元素更好。但我无法找到一种方法来实现'在时间轴，点击推文，加载回复，点击另一条推文加载另一个回复的效果。

这里有一些代码贯穿我的想法：

<div class="tweet" ng-repeat="tweet in tweets">
    <div class="tweet-content">{{tweet}}</div>
    <a class="button" ng-click="loadreplay()">load reply</a>
    <div class="reply-container">{{reply}}</div>
</div>

如果我像这样写控制器

app.controller('Test', function($scope){
    $scope.tweets = ["foo", "bar"];
    $scope.loadreplay = function(){
        $scope.reply = "reply";
    }
});

然后所有{{reply}}字段都会被'回复'填充，所以在这种情况下，操纵dom元素是唯一的解决方案吗？还是一些更“棱角分明”的方式？

Answer 1

为您的数据/模型使用适当的架构。考虑到你不仅会存储文本，而且至少会存储类似ID的内容，无论如何都要使用对象。所以想想这样的事情：

$scope.tweets = [
  { id:1, txt: 'foo' },
  { id:2, txt: 'bar' }
]

然后您也可以将单个回复存储在该对象中：

$scope.loadreply = function(tweet) {
  tweet.reply = 'Reply';
}

注意：在此功能中，您还可以使用ID来例如从服务器获取推文，如下所示：

$scope.loadreply = function(tweet) {
  tweet.reply = LoadReplies(tweet.id);
}

然后，您将使用tweet特定回复属性进行显示：

<div ng:repeat="tweet in tweets">
  <div>{{tweet.txt}}</div>
  <a ng:click="loadreply(tweet)">load reply</a>
  <div>{{tweet.reply}}</div>
</div>

查看这个工作演示的小提琴：http://jsfiddle.net/XnBrp/

实现在angularjs中嵌入像twitter这样的评论

1 个答案: