更新された配列値をディレクティブにバインドする方法は？

Question

socket.ioを使用しているサーバーからのメッセージがあるたびにメッセージが受信されました。$scope.eventアレイに追加しています。コントローラでメッセージを受け取ったとき、ディレクティブの隔離スコープを更新するにはどうすればいいですか？

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をコールしてAngularが変更を認識できるようにしてください。

これを試してください：

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

From documentation:

$（適用）は、角フレームワークの外部からの角度での発現を実行するために使用されます。 （たとえば、ブラウザのDOMイベント、setTimeout、XHR、または第三者のライブラリから）。角度フレームワークを呼び出すので、例外処理、時計の実行の適切なスコープライフサイクルを実行する必要があります。