각도 - 웹소켓 및 $rootScope.apply()

각도 - 웹소켓 및 $rootScope.apply()

저는 현재 웹소켓을 사용하여 백엔드와 통신하는 각진 앱을 가지고 놀고 있습니다.앵글의 데이터 바인딩이 제대로 작동하지 않습니다.

아래 예제에서 웹소켓 연결을 만드는 서비스를 만들었습니다.웹소켓이 메시지를 수신하면 수신된 모든 메시지를 포함하는 배열로 해당 메시지를 밀어 넣습니다.

컨트롤러에서 해당 메시지 배열을 스코프에 바인딩한 다음ng-repeat내가 보기엔 전부 다 나열하는 것 같아요

서비스:

factory('MyService', [function() {

  var wsUrl = angular.element(document.querySelector('#ws-url')).val();
  var ws = new WebSocket(wsUrl);

  ws.onopen = function() {
    console.log("connection established ...");
  }
  ws.onmessage = function(event) {
      Service.messages.push(event.data);
  }   

  var Service = {};
  Service.messages = [];
  return Service;
}]);

컨트롤러:

controller('MyCtrl1', ['$scope', 'MyService', function($scope, MyService) {
  $scope.messages = MyService.messages;
}])

부분:

<ul>
  <li ng-repeat="msg in messages">
      {{msg}} 
  </li>
</ul>

그러나 이는 올바르게 작동하지 않습니다.새 메시지가 수신되고 배열에 푸시되면 모든 메시지를 표시해야 하는 목록이 업데이트되지 않습니다.각진 양방향 데이터 바인딩 때문에 업데이트 될 것으로 예상했습니다.

한 가지 해결책을 찾은 것은 메시지의 푸시를 다음에 전달하는 데 사용하기 위한 것입니다.$rootScope.apply()서비스 중:

ws.onmessage = function(event) {
  $rootScope.$apply(function() {
    Service.messages.push(event.data);
  });
}  

제 질문은 다음과 같습니다.

1. 사용하지 않으면 목록이 자동으로 업데이트되지 않는 각도의 예상 동작입니까?$rootScope.apply()?

2. 왜 포장을 해야 합니까?$rootScope.apply()?

3. 사용중$rootScope.apply()이것을 해결하는 올바른 방법은?

4. 더 나은 대안이 있습니까?$rootScope.apply()이 문제 때문에?

1. 예, 각도JS의 바인딩은 "턴 기반"이며, 특정 DOM 이벤트 및 호출 시에만 실행됩니다.$apply/$digest. 다음과 같은 유용한 서비스가 있습니다.$http그리고.$timeout포장은 해드리지만, 그 밖의 모든 것은 또는 에 전화를 해야 합니다.

2. 앵귤러를 놔줘야 합니다.JS는 보기를 업데이트할 수 있도록 범위에 바인딩된 변수를 변경했다는 것을 알고 있습니다.하지만 이것을 할 수 있는 다른 방법들이 있습니다.

3. 당신이 어떤 도움을 필요로 하느냐에 따라 다르겠죠.코드를 래핑할 때$apply(), 각진JS는 당신의 코드를 내부 angularjs logging과 예외 처리로 감싸고, 그것이 끝나면 전파합니다.$digest모든 컨트롤러의 범위에 적용할 수 있습니다.대부분의 경우 포장은$apply()가장 좋은 방법입니다. 사용하게 될 수도 있는 각도의 미래 기능을 위해 더 많은 문을 열어 둡니다.이것이 올바른 방법입니까?아래를 읽어보세요.

4. Angular의 오류 처리를 사용하지 않고 변경 사항이 다른 범위(루트, 컨트롤러 또는 지시사항)에 전파되지 않아야 하며 성능을 최적화해야 하는 경우 다음을 수행할 수 있습니다.$digest특히 당신의 컨트롤러에$scope이렇게 더러운 이렇게 하면 더러운 검사가 전파되지 않습니다.그렇지 않으면 오류가 Angular에 의해 발견되지 않도록 하고 다른 컨트롤러/디렉티브/rootScope에 전파하기 위해 더티 체크가 필요한 경우 $로 래핑하는 대신 사용할 수 있습니다.apply, 전화만$rootScope.$apply()당신이 변화를 준 후에 말입니다.

추가 참조: vs

언급URL : https://stackoverflow.com/questions/21658490/angular-websocket-and-rootscope-apply