AngularJS : 컨트롤러의 $ 범위의 값에 서비스 변수 바인딩하기

Question

단일 페이지 AngularJS 웹 앱을 만들고 있습니다. 내 응용 프로그램은 사용자 상태에 대한 정보를 얻기 위해 백엔드 서비스를 쿼리 할 수 ​​있어야하며이 상태 정보는 단일 페이지 응용 프로그램의 다양한 부분에서 사용할 수 있어야합니다. 이 기능을 관리하는 서비스를 만들었지 만 나에게 합리적인 방식으로 문제를 해결하는 데 어려움을 겪고 있습니다.

처음,이 같은 설정 것들 ... 내 컨트롤러에서 다음

<service.js> 
... 
var url = 'www.my-backend.com'; 
this.val = [ 
    { 
     name: 'undefined', 
     isValid: false 
    } 
]; 
$http.get(url, {}) 
    .success (function (data) { 
     this.val = data; 
    }) 
    .error (function() { 
     this.val = [ 
      { 
       name: 'error', 
       isValid: false 
      } 
     ]; 
    }); 
... 

그리고 ...

<controller.js> 
... 
$scope.val = service.val 
... 

이 그래도 작동하지 않았다 (val.name는 '정의되지'하고 있었다) 아마도 service.val이 get 요청이 종료 될 수 있기 전에 컨트롤러 $ 범위에 바인딩 되었기 때문일 수 있습니다. 그러나, 그것은 내가 읽은 것과 확답이 같지 않습니다. here.

나는이이었다 한 다음 일은 ...

<service.js> 
... 
var url = 'www.my-backend.com'; 
this.valPromise = $http.get(url, {}); 
... 

그리고 내 컨트롤러에서 ...

<controller.js> 
... 
$scope.val = [ 
    { 
     name: 'undefined', 
     isValid: false 
    } 
]; 
service.valPromise 
    .success (function (data) { 
     $scope.val = data; 
    }) 
    .error (function() { 
     $scope.val = [ 
      { 
       name: 'error', 
       isValid: false 
      } 
     ]; 
    }); 
... 

는이 일을하지만, 나는 그것을 좋아하지 않았다. 나는 그 논리가 서비스에 속한 것처럼 느낀다.

그래서 내가 한 일은 희망적인 효과가있는 것으로 보이지는 않지만 here이라는 다양한 제안을 통해 작업 한 것입니다. 나도 this를 보았다. 그러나 그것은 과잉과 같게 정말로 나의 문제에 적용 할 수 없다.

이상적으로는 (내 서비스 변수를 참조로 내 컨트롤러 범위에 단단히 묶는) 첫 번째 시도를 수행하는 방법을 실제로 알고 싶습니다. 그러나 이것이 각도 프레임 워크 내에서 실제로 수행 될 수있는 것이 아니라면, 어떤 종류의 watch 동작을 사용하게되어 기쁩니다. 누구나 내가 잘못하고있는 것을 발견 할 수 있습니까? 아니면 내 서비스 변수가 내 컨트롤러에 제대로 연결되지 않는 이유는 무엇입니까?

Answer 1

$http 콜백에서 this은 서비스가 아닙니다. SO에 관한 this의 의미에 대한 많은 답을 찾을 수 있습니다. 변수를 통해 서비스를 참조해야합니다.

두 번째 문제는 this.val = data;이 서비스에 새 값을 할당하지만 이전 배열을 계속 가리키는 범위의 데이터는 변경하지 않는다는 것입니다. 따라서 새 데이터를 기존 배열에 복사해야합니다.

var service = this; 
$http.get(url, {}) 
.success (function (data) { 
    angular.copy(data, service.val); 
})