반응형
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
반응형
'itsource' 카테고리의 다른 글
angularjs [ng:areq] 인수 'fn'이 함수가 아닙니다. 문자열이 있습니다. (0) | 2023.10.24 |
---|---|
기존 테이블에 부울 열 추가 (0) | 2023.10.24 |
제한이 있는 MySql 삭제 문 (0) | 2023.10.24 |
Powershell - https 바인딩에 SSL 인증서 설정 (0) | 2023.10.24 |
이스이스이스요소 블록 레벨 또는 인라인 레벨?요소 블록 레벨 또는 인라인 레벨?요소 블록 레벨 또는 인라인 레벨? (0) | 2023.10.24 |