如何将更新后的数组值绑定到指令？

Question

我有来自使用socket.io的服务器的消息，每次收到消息我都将它添加到$scope.event数组中，当我在控制器中收到消息时，如何更新指令隔离作用域message的值，这不会发生在下面的代码中？

directive.js

angular.module("App").directive('progressBarCustom',function () {
    return {
        restrict: 'E',
        scope:{
            message: "=",
            fileSize: "=",
        },
        templateUrl: '/view/partials/progressbar.html',
        controller: "StCtrl",
        link: function(scope, el, attrs) {
            var data = scope.message;
    }
});

main.html

  <ul style="list-style: none;">
                            <li ng-repeat="message in event track by $index" ng-class="{lastItem: $last}"><span><strong>Log:</strong></span><span>{{message}}</span></li>
                        </ul>

ctrl.js

socket.on('ditConsumer',function (data) {
        $scope.event.push(data);
}

$scope.event = ["lorem ipsum","lorem ipsum"];

template.html

<progress-bar-custom ng-show="progressBarFlag" message="event"  file-size="selectedFileSize"></progress-bar-custom>

Answer 1

我从来没有使用过socket.io，但是回调似乎是在Angular控件之外执行的，所以你应该调用一个$scope.$apply来让Angular知道这个变化。

试试这个：

socket.on('ditConsumer',function (data) {
  $scope.$apply(function() {
    $scope.event.push(data);
  });
}

From documentation:

$apply()用于从angular框架外部执行angular中的表达式。(例如，来自浏览器DOM事件、setTimeout、XHR或第三方库)。因为我们正在调用angular框架，所以我们需要执行异常处理的适当作用域生命周期，执行监视。