2013-10-02 3 views
6

일반 함수를 통해 전역 변수에 액세스하려고합니다. 가능합니까?AngularJs : 컨트롤러 외부에서 전역 변수에 액세스하는 방법?

$ rootScope를 사용하여 var를 설정했으며 콜백 함수를 통해 액세스하려고합니다. 이 콜백은 컨트롤러에서 호출됩니다. 콜백에 $rootScope을 전달하고 싶지 않습니다.

$rootScope.var에 액세스 할 수있는 방법이 있습니까?

가능한 경우 서비스를 이용할 수 있습니다.

좋습니다.

나는 다음과 같은 rootScope에 액세스하려고 감사

:

function fbLandingCtrl($scope, $rootScope) { 
    $rootScope.isFBLoggedin = false; 
    $scope.login = function() { 
     console.log($rootScope.isFBLoggedin); 
     fbHelper.login(getUserInfo); 
     }; 

     function getUserInfo(){ 
      fbHelper.getUserInfo(updateStatus); 
     } 
     function updateStatus(userInfo){ 
      $rootScope.isFBLoggedin = true; 
      console.log($rootScope.isFBLoggedin); 
     } 
    } 

을 내 서비스는이다 : 그것은 updateStatus의 FN에서 참으로 isFBLoggedin 표시되어 있지만입니다

myapp.factory('FBService', [ '$rootScope', function ($rootScope) { 
    $rootScope.isFBLoggedin = false; // global variable 
    $rootScope.userName = null; 
    $rootScope.userEmail = null; 

    return { 

     getStatus: function() { 
      return $rootScope.isFBLoggedin; 
     }, 
     setStatus: function(status) { 
      console.log("Status:"+status); 
      return $rootScope.isFBLoggedin = status; 
     } 
     }; 
}]); 

보기에 반영되지 않음

인쇄하고 있습니다. {{isFBLoggedin}}입니다. 거짓을 나타내는 TS

마지막으로 작동합니다.

@ dluz 용액을 따라 갔다.

는 또한 뷰

을 렌더링하는 $rootScope.$apply(function() {}})을 사용하면 컨트롤러 기준으로 $ rootScope을 추가 한 경우 당신은 컨트롤러 내부에 $ rootScope.var에 액세스 할 수 있습니다

답변

5

어떤 함수를 정의하기 위해 $의 rootScope를 사용하지 마십시오 - 그것은 정말 나쁜 좋습니다. 결국 $ rootScope는 전역 변수라는 것을 기억하십시오.

는이 같은 서비스를 통해 $의 rootScope를 얻을 수 있습니다 : 모난 형태로

<!doctype html> 
<html lang="en" ng-app="myApp"> 
    <head> 
<meta charset="UTF-8"> 
<title>Document</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script> 

    <script> 

    var myApp = angular.module('myApp', []); 

     myApp.controller('myAppCtrl', ['$scope', 'myService', function ($scope, myService) { 

     console.log(myService.getData()); 

}]) 

     myApp.factory('myService', [ '$rootScope', function ($rootScope) { 

     return { 

     getData: function() { 
      return $rootScope; 
     } 
     }; 
     }]) 


    </script> 

    </head> 
    <body ng-controller="myAppCtrl"> 

    </body> 
    </html> 

$rootScope exists, but it can be used for evil

스코프를 계층 구조, prototypically 트리의 상단에 루트 범위에서 상속. 보통 대부분의 뷰에는 컨트롤러가 있으므로 범위 자체가 무시되므로 무시할 수 있습니다.

경우에 따라 전체 앱에 전역으로 적용하려는 데이터가 있습니다. 이를 위해 $ rootScope를 삽입하고 다른 범위와 마찬가지로 값을 설정할 수 있습니다. 범위는 루트 범위를 상속하므로이 값은 로컬 $ 범위의 값처럼 ng-show와 같은 지시문에 첨부 된 표현식에서 사용할 수 있습니다.

물론 글로벌 상태가 좋지 않으므로 모든 언어에서 전역 변수를 사용하는 것처럼 $ rootScope를 줄여 사용해야합니다. 특히 코드에만 사용하고 데이터는 사용하지 마십시오. $ rootScope에 함수를 넣으 려한다면, 필요한 곳으로 주입 할 수 있고 더 쉽게 테스트 할 수있는 서비스에 넣는 것이 거의 항상 더 좋다.

반대로 데이터의 저장 및 반환 만 목적으로 만 사용하는 서비스는 만들지 마십시오.

업데이트] 답변

A_J, 나는 응용 프로그램의 시나리오 무엇 확실하지 않다. 더 나은 답변을 제공하기 위해 더 많은 코드가 필요하지만 아래 코드를 살펴보십시오. 어쩌면 service 안에 $rootScope에 액세스하도록 코드를 디자인 할 수있는 방법을 알려줄 수 있습니다.

"Log me In"버튼을 누르고 콘솔을보십시오. 여기 예를 들어 작업 (http://jsbin.com/olOyaHa/1/)

<!doctype html> 
<html lang="en" ng-app="myApp"> 
    <head> 
<meta charset="UTF-8"> 
<title>Document</title> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script> 

<script> 

    var myApp = angular.module('myApp', []); 

    myApp.controller('fbLandingCtrl', ['$scope', '$rootScope', 'loginService', function ($scope, $rootScope, loginService) { 

    $rootScope.isFBLoggedin = false; 

    $scope.login = function() { 
     console.log('Current login status', $rootScope.isFBLoggedin); 

     console.log(loginService.getUserInfo()); 

     loginService.login(loginService.getUserInfo()); 

     loginService.updateStatus(); 
     }; 


    }]); 


    myApp.factory('loginService', [ '$rootScope', function ($rootScope) { 

    return { 

     login: function() { 
      console.log('now I am logged in!'); 
      return $rootScope.isFBLoggedin = true; 
     }, 

     getUserInfo: function() { 
      return { 
       username: 'xmen', 
       role: 'admin', 
       logged: 'false' 
      }; 
     }, 

     updateStatus: function(userInfo){ 
      $rootScope.isFBLoggedin = true; 
      console.log('Current login status', $rootScope.isFBLoggedin); 
     } 
     }; 
    }]) 


    </script> 

</head> 
<body ng-controller="fbLandingCtrl"> 
    <button ng-click="login()">Log Me In</button> 
</body> 
</html> 
+0

을 정확히 편집했는데, 정상적인 기능에서 해당 서비스에 직접 액세스 할 수 있습니까? –

+1

"정상적인 기능"은 어디에 정의되어 있습니까? '지시어'나'컨트롤러'안에있을 것인가? 따라서 대답은 YES입니다. 지시어 나 컨트롤러의 의존성으로 서비스를 추가하기 만하면됩니다. 정상적인 기능이 다른 곳에서 정의된다면 그것은 코드 디자인 문제이며 논리를 검토해야합니다. –

+0

"정상적인 기능"이란 무엇입니까? 각도 범위를 벗어난 함수? 코드 디자인 문제가있는 것 같습니다 ... – Scalpweb

2

: 그것은 당신의 콜백만큼 작동합니다

function MyCtrl($scope, $rootScope, $routeParams /*, ... */) 
{ 
    /* Controller code and callback code here */ 
} 

귀하의 컨트롤러 내에 정의되어 있습니다.

편집 : 우리의 토론 후, 여기 rootScope 내부 함수를 정의하는 방법은 다음과 같습니다

yourApp.run($rootScope/*, ResourceProvider ... */) { 
    $rootScope.yourFunction= function() { 
     /* The code of you functions */ 
    } 
} 
+0

감사하지만 해당 컨트롤러 –

+0

의 외부 콜백 함수에 var에, 왜 당신이 컨트롤러 내에서이 콜백을 정의 할 수 있음을해야합니까? – Scalpweb

+0

이것은 유틸리티 함수이기 때문에 다른 함수들도 액세스 할 수 있습니다 –

관련 문제