itsource

Angularjs 서비스 콜백을 통해 컨트롤러 범위 업데이트

mycopycode 2023. 10. 24. 21:19
반응형

Angularjs 서비스 콜백을 통해 컨트롤러 범위 업데이트

타사 라이브러리 콜백 기능을 갖춘 서비스:

mbAppModule.service('aService', function ($http) {
    this.data={"somedata":0};
    var m3rdPartLib="init";  // init    
    m3rdPartLib.on('timeupdate', function() {
        this.data.somedata=1;
    });
}

그리고 컨트롤러는

mbAppModule.controller({
    MController: function ($scope, $http, mService) {
        $scope.mService= mService;    
    });
});

html 페이지

{{mService.data.somedata}}

문제:

m3rdPartLib.on()은 서비스에서 사용하고 있는 타사 라이브러리 콜백 기능입니다.업데이트 중이라 UI에 보여주고 싶습니다.콜백 시 값이 변경되지만 UI에는 반영되지 않습니다.

일부 문서를 읽고 $rootScope을 찾았습니다.$apply를 호출할 수는 있지만 서비스에서 $scope/$rootScope에 대한 참조가 없습니다.

의존성을 가질 수 있습니다.$rootScope그리고 당신의 서비스에 전화 신청을 합니다.

mbAppModule.service('aService', ["$http", "$rootScope", function ($http, $rootScope) {
    this.data = {
        "somedata": 0
    };
    var m3rdPartLib = "init"; // init    
    m3rdPartLib.on('timeupdate', function () {
        $rootScope.$apply(function(){
            this.data.somedata = 1;
        });
    });
}]);

데이터를 무작위로 동적으로 변경하는 청취자 등이 있어 서비스에서 입력 필드를 업데이트해야 했습니다.

이를 통해 컨트롤러에서 스코프 기능을 호출할 수도 있습니다.

//scope will be set to current scope of a controller
//which has an ng-view containing this element    
var scope = angular.element('#input-element').scope();
//wrap changes in an apply call to make sure view and model are consistent
scope.$apply(function() {
    scope.object.data = value;
});

이 게시물 덕분에:AngularJS를 사용하여 브라우저 콘솔의 $scope 변수에 액세스하려면 어떻게 해야 합니까?

사용하다$scope.$watch기능.jsfiddle을 보세요.라이브러리가 없어서 시뮬레이션만 합니다. 5초 후 값이 0에서 1로 바뀝니다.

서비스에서 스코프를 사용하는 경우 서비스가 컨트롤러로 데이터만 검색해야 하므로 SRP를 위반하고 있음을 알 수 있습니다.제 제안은 당신이 이런 것을 할 수 있다는 것입니다.

mbAppModule.service('aService', ["$http", "$rootScope", function ($http, $rootScope) {
  this.data = {
    "somedata": 0
  };
  var m3rdPartLib = "init"; // init    
  this.GetPartLib = function () { 
    return m3rdPartLib;
  }
}]);

mbAppModule.controller({
  MController: function ($scope, $http, mService) {
  this.GetPartLib = function (){ 
    mService.on('timeupdate', function() {
     this.data.somedata=1;
    });
  }
});

언급URL : https://stackoverflow.com/questions/18931689/angularjs-service-callback-to-update-scope-of-controller

반응형