bindToController在指令定义

Question

我想用Angular.js创建一个聊天应用程序。存储在Array中的消息，我必须将该数组绑定到HTML视图。如果我点击每条消息，我需要在控制器内部触发一个alert（）。我的控制器是这样的：

app.controller("timelineCtrl", function ($scope) {
    var self = this;
    self.arr={};

    // this called from a socket message and pushed it's data to this array
    self.arr.push(socket_message);

}

我有这个指令：

app.directive('helloWorld', function() {

    return {
        restrict: 'AE',
        scope:{
            post: '='
        },
        template: '<div class="timeline-item"> Hello {{postCtrl.post}} </div>',
        controller: 'timelineCtrl',
        controllerAs: 'postCtrl',
        bindToController: true
    };
});

这是我的HTML视图：

<div ng-controller="timelineCtrl as postCtrl">
    <div ng-repeat="post in postCtrl.arr">
         <hello-world post='post'></hello-world>
    </div>
</div>

现在，使用这种结构，当第一个项目进入数组时一切正常，当第二个项目到来时，不附加到数组并替换为第一个项目，然后下一个项目表现正常并附加到数组。为什么第二项用第一项替换？

这是我在浏览器控制台中的阵列日志：

这个问题似乎与控制器别名部分内部指令有关，因为当我添加bindToController和controllerAs：'postCtrl'时，会出现这种奇怪的行为。我第一次按下按钮HTML正常更新，但下次没有任何作用。我记录该数组，似乎当第二个项目到达时，无缘无故地替换第一个项目。它似乎是一个重叠的问题或类似的东西。